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本 書 内 容 に 関す る お 問い 合わ せ に つい て 


この た び は 翔 泳社 の 書籍 を お 買い 上 げ い た だ き 、 誠 に あり が と う ご ざ いま す 。 弊社 で は 、 読 者 の 皆様 か ら の お 問い 合わ せ に 適切 に 対応 
させ て いた だ く た め 、 以 下 の ガ イド ライ ン へ の ご 協力 を お 願い 致し て お り ま す 。 下記 項目 を お 読み いた だ き 、 手 順に 従っ て お 問い 合わ 
せく だ さい 。 


@ ご 質問 され る 前 に 
弊社 Web サ イト の 「 正 誤 表 ]」 を ご 参照 くだ さい 。 こ れ ま で に 判明 し た 正誤 や 追加 情報 を 掲載 し て いま す 。 
正誤 表 http://www.shoeisha.co.jp/book/errata/ 
@ ご 質問 方 法 


弊社 Web サ イト の | 刊行 物 Q&A」 を ご 利用 くだ さい 。 
刊行 物 Q&A http://www.shoeisha.co.jp/book/qa/ 


イン ター ネッ ト を ご 利用 で な い 場 合 は 、FAX ま た は 郵便 に て 、 下 記 “ 翔 泳社 愛読 者 サー ビス セン ター まで お 問い 合わ せく だ さい 。 
電話 で の ご 質問 は 、 お 受け し て お り ま せん 。 


@ 回 答 に つい て 
回 答 は 、 ご 質問 いた だ いた 手段 に よっ て ご 返事 申し 上 げ ま す 。 ご 質問 の 内 容 に よっ て は 、 回 答 に 数 日 な いし は それ 以上 の 期間 を 


要する 場合 が あり ます 。 


@ こ ご 質問 に 際 し て の ご 注意 
本 書 の 対象 を 越え る も の 、 記 述 個所 を 特定 され な いも の 、 ま た 読者 固有 の 環境 に 起因 する ご 質問 等 に は お 答え で きま せん の で 、 
あら か じ め ご 了承 くだ さい 。 


@ 和 郡 便 物 送 付 先 お よび FAX 番号 
送付 先住 所 〒160-0006 東京 都 新宿 区 舟町 5 
FAX 番号 03-5362-3818 
宛先 (株 ) 翔 泳社 愛読 者 サー ビス セン ター 


※ 本 書 に 記載 され た URL 等 は 了 予告 な く 変更 され る 場合 が あり ます 。 

※ 本 書 の 出版 に あたっ て は 正確 な 記述 に つと め ま し た が 、 著者 や 出版 社 な どの いずれ も 、 本 書 の 内 容 に 対し て な ん ら か の 保証 を する も の で は な く 、 内 容 
や サン プル に 基づく いか な る 運用 結果 に 関し て も いっ さい の 責任 を 負い ませ ん 。 

※ 本 書 に 掲載 され て いる サン プル プロ グラ ム や スク リプ ト 、 お よび 実行 結果 を 記し た 画面 イメ ー ジ な ど は 、 特 定 の 設定 に 基づい た 環境 に て 再現 され 
る 一 例 で す 。 


※ 本 書 に 記載 され て いる 会 社名 、 製 品名 は それ ぞ れ 各社 の 商標 お よび 登録 商標 で す 。 
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刊行 に あたっ て 

私 た ち 1980 年 前 後生 まれ の 世代 が ゲー ム 開 発 者 を 
目指 すこ ろ に は 、 ゲ ー ム 開発 は 大 規模 な も の に な っ て 
お り 、 開 発 工程 が 細分 化 さ れ 、 分 業 化 が 進ん で いま し 
た 。 ゲ ー ム 開発 に 参入 する た め の 障 壁 も 高く 、 た いて 
い は 企業 単位 で の 開発 、 販売 し か 許さ れ な い 時 代 で し 
た 。 し か し 昨今 イン ター ネッ ト や スマ ー ト フォ ン の 普 
及 に 伴い 、 い わ ゆ る イン ディ ー ズ ゲー ム の 波 が や っ て 
さて 、 少 な い 予 算 、 少 な い 人 上 員 で あっ て も ゲー ム 開 発 
を 行い 、 自 分 の 作っ つた ゲー ム を 比較 的 自由 に 世の中 に 
送り 出せ よう に な っ て きま し た 。 こ れ は 、 ゲ ー ム 開発 
者 た ち に と っ て 朗報 で あり 、 ゲ ー ム 開発 者 を 目指 す 人 
た ち に と つっ て も 良い 時 代 の 到来 こなつ て いま す 。 

本 書 で は 、 こ うし た 流れ の な か 、 読者 の 皆さん が 個 
人 で も ゲー ム を 開発 し 、 自 ら の 手 で 作品 を 公開 で きる 
よう な 方 法 を 提案 し て いま す 。 こ の 本 を 読む こと で 、 
実際 に ゲー ム を どの よう に 企画 する の か 、 ど の よう に 
プロ グラ ミン グ を する の か の 概略 を つか むこ と が で き 
る で し ょ う 。 た だ し 、 本 書 で 紹介 する の は 、 シ ミュ レ 
ーション ゲー ム を 題材 に し た ゲー ム 開 発 の 一 つの 方 法 
論 に す ざ ま せん 。 人 今後 、 読 者 の 皆さん が ゲー ム を 開発 
を し て いく な か で は 、 自 分 な り の 開発 手段 や 方 法 を 確 
立 し て いく 必要 が あり ます 。 こ の 本 は その 手助け と な 
る こと を 目指 し て 作ら れ ま し た 。 本書 を 読む こと で 実 
際 に ゲー ム 開 発 を する 意欲 が 湧い て くる と し た ら こ れ 
ほど 嬉し いこ と は あり ませ ん 。 

また 本 書 の 著者 で ある ロバ ー ト ・ ジ ェ イ ・ ゴ ー ル ド は 、 
ゲー ム プ ログ ラマ ー と し て 複数 の 大 手 ゲ ー ム パブ リッ 


シャ ー に お ける ゲー ム 開 発 を 経験 し こおり 、 現 在 は イ 
ン デ ィ ー ズ ゲー ム メ ー カ ー で ある GAMKIN 株 式 会 社 の 
CTO (最高 技術 責任 者 ) 兼 CGD (チー フ ゲ ー ム デザ イ 
ナー) と し て 活躍 し て いま す 。 彼 も 含め た 我々 
GAMKIN は 、 自 分 た ち が 培 っ て きた ゲー ム 業 界 で の 
経験 を より 多く の 後進 の 方 々 と 共有 し て いく こと 、 ま 
た 若手 ゲー ム 開 発 者 の 育成 の 手助け こ な る こと を 考え 
て いま す 。 私 目 身 も ゲー ム 専 門 学校 で 講師 を し て お り 、 
今回 私 た ちの 思い が 一 つの 形 と な っ た こと は 、 会 社 の 
代表 と し て 本 当 に 嬉し く 思 っ て お り ま す 。 
最後 に な り ま す が 、 本 書 の 刊行 に あたり 多大 な る ご 
尽力 を いた だ きま し た 株 式 会 社 翔 泳社 編集 部 の 皆様 、 
本 書 の イラ スト を 担当 し て くれ た 、 た え 反 ぽん 様 、 ま 
た GAMKIN の メン バー、GAMKIN を 日 頃 か ら 応 援 ・ 
支援 し こく だ さっ て いる 多く の ファ ン や 企業 の 皆様 、 
そし て 本 書 を 手 に 取っ て いた だ いた 皆様 に 対し 、 こ の 
場 を 借り て 深く 感謝 の 意 を 述べ させ て いた だ きま す 。 
本 当 に あり が と うつ ご ざい ます ! 
2014 年 11 月 吉日 
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サン プル コー ド ダ ウン ロー ド の ご 案内 

本 書 の 中 で 紹介 し た サン プル コー ド な ど は 、 以 下 の サ イト か ら ダ ウン ロー ド で きま す 。 

画 翔 泳社 | サン ブル タダ ウン ロー ド 」 の URL 
http://www.shoeisha.co.jp/book/download/9784798137841 
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/ 本 章 で 勉強 する こと 
e シ ミュ レー ショ ン ゲ ー ム は コン ピュ ー タ ゲ 
ー ム の 登場 以前 か ら あ る ゲー ムジ ャ ン ル 
@ チェ ス や 将棋 の 先祖 と な る ゲー ム な ど 、 古 
い 歴 史 が ある 
@ 近代 の 兵 棋 演習 か ら 、 ゲ ー ム に 確率 と 資源 
と いう 概念 が 導入 され る 


@e@ コ ンピュータ と と も に 登場 し た ゲー ム は シ 
ミ g ァ レー ショ ン だ っ た ! 

e 多く の テー ブル トッ プ ゲ ー ム か ら 、 コ ン ピ 
ュー タ に よる シミ ュ レ ーション ゲー ム が 生 
み 出 され た 


シミ ュ レ ーション ゲー ム っ て どん な ゲー ム ? 


シミ ュ レ ーション と いう と 、「 現 実 世界 の 現象 を 何 か 別 の 手段 で 置き 換え て 再現 する こと 」 を いい ます 。 


シン ミ ュ レ ーション ゲー ム の 歴史 


\ 


し た が っ て 、 シ ミュ レー ショ ン ゲ ー ム と いえ ば 、 現 実 世 界 の 再現 を ゲー ム の 形 で 表現 し た も の と いえ る で 
し よう 。 

一 般 的 に 言 ラ シミ ュ レ ーション ゲー ム は 、 ウ ォ ー・ シ ミュ レー ショ ン ゲ ー ム の こと を 指す よう に 思い ま 
す が 、 ウ ォ ー (戦争 ある い は 戦闘 ) 以外 に も 、 実 際 に は | 育成 シミ ュ レ ーション 」 | 経営 シミ ュ レ ーション 」 
| 恋愛 シミ ュ レ ーション 」 な どの いろ いろ な 種類 の シミ ュ レ ーション ゲー ム が 存在 し ます 。 こ れ は (正確 
な 再現 が で き て いる か は と も か く ) 「 何 ら か の 現象 を 再現 し よう と する タイ プ の ゲー ム 」 と いう こと に な 
り ま す 。 し か し 、 た ん に 「 シ ミュ レー ショ ン ゲ ー ム 」 と いう と 、 大 抵 の 場合 、 ウ ォ ー・ シ ミュ レー ショ ン 

思い 浮か が べ る こと が 多い の で は な いか と 思い ます 。 

で は 、 シ ミュ レー ショ ン ゲ ー ム の 起源 を 探し て いき まし ょ う 。 皆 さん は 、 自 分 が 生ま れ て 初め て 遊ん だ 
シミ ュ レ ーション ゲー ム を 思い 浮か が べ て し まう か も し れ ま せん 。 し か し 、 ビ デオ ゲー ム が 誕生 する 遥か 昔 
か ら ウ ォ ー・ シ ミュ レー ショ ン ゲ ー ム は 存在 し て お り 、 深 くそ の 歴史 を 調べ れ ば 、 そ の 起源 は 数 千年 前 に 
遡る こと が で きま す 。 そ の 意味 で は 、 シ ミュ レー ショ ン ゲ ー ム は 人 類 で 一 番 古 い ゲ ー ム ジャ ン ル で ある か 
も し れ ま せん 。 


(た | チャ トラ ン ガ 、 チ ェ ス 、 将棋 


人 

[戦争 |「 シ ミュ レー ショ ン 」「 ゲ ー ム 」 こ の 3 つの 条件 を 満た す 、 古 代 イ ンド の ボー ド ゲ ー ム と し て チ 

ャ トラ ン ガ (Chaturanga) が 知ら れ て いま す 。 王 、 将 、 象 、 馬 、 船 、 歩 兵 の 駒 を 使う ゲー ム で 、4 人 制 

で も 遊べ る も の で し た 。 こ の ゲー ム は 3 世紀 (280 年 ) 頃 か ら 遊 ばれ て いて 、 皆 さん が よく 知っ て いる 
将棋 や チェ ス の 起源 と な つっ て いま す 。 


図 1-1 古代 イン ド の ボー ド ゲ ー ム 「 チ ャ トラ ン ガ | 


チャ トラ ン ガ か ら 生 まれ た 現代 の チェ ス に 近い ルー ル の ゲー ム は 7 世紀 に は ベル シア 王国 に 存在 し て い 
まし た 。 ま た 、 日 本 の 将棋 の 元 と な る ゲー ム は 中 国 経 由 で 日 本 に も た ら さ れ て お り 、 日 本 で は | 平安 将棋 」 
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が 12 世 紀 ご ろ に 誕生 し まし た 。 そ れ ぞ れ 16 ~ 17 世 紀 ご ろ に は ルー ル が 標準 化 さ れ 、 ゲ ー ム と し て で 発展 
し 始め まし た 。 


 、 ア 1 
(た | 兵 模 演習 と ウォ ー・ ゲ ー ム 
eas a Ti | (EE CE EE NE Ua (EE (ES EE | | EE ES EE EE EN | EE [OE (I TE a EI (EH Ed Fa EE EE I [i ES Vi a 

チェ ス や 将棋 が シミ ュ レ ーション ゲー ム の 祖先 で ある こと は 間違い あり ませ ん が 、 こ れ ら は 今 みな さん 
が イメ ー ジ し て いる 現代 の シミ ュ レ ーション ゲー ム よ り も 「 ア ブス トラ クト 」 (抽象 度 ) が 高く な っ て い 
ます 。 現在 の シミ ュ レ ーション ゲー ム の スタ イル と 究 囲 気 は 、 ど ちら か と いう と 昔 か ら 軍人 が 利用 し て い 
る 殿 棋 演習 や 作戦 会 議 に 近い も の で し ょ う 。 兵 棋 演 習 で は 、 盤 に 戦場 と な る 地形 を 描い て 、 人 や 馬 、 兵 器 
な どの 駒 を 置い て 作戦 を 話し 合い ます 。 こ ちら は シミ ュ レ ーション で は あっ て も 、 ゲ ー ム で は あり ませ ん 。 
し か し 、 こ の よう な 兵 棋 演 習 は 数 千年 前 か ら 存 在 し ます 。 チ ャ トラ ン ガ や チェ ス 、 将 棋 は 、 こ れ ら を 抽象 
的 化し た 結果 生ま れ た ゲー ム だ と いえ る で し ょ う 。 


図 1-2 兵 棋 演習 の 様子 (ジョ ン ソ ン 米 大 統領 


兵 棋 演習 は 18 世 紀 に ひと つの 重要 な 変革 が 起き ます 。1780 年 代 に ドイ ツ の ヨハ ン ・ ヘ ル ヴ ィ ッ ヒ は 
チェ ス の ゲー ム 性 か ら イ ンス ピ レ ー シ ョ ン を 得 て 、 そ の 後 、 軍 人 が 使っ て いた 兵 棋 演習 と ゲー ム を 組み 合 
わせ た クリ ー グ スピ ー ル (kriegsspiel) と いう も の を 作り まし た 。 これ は 、 和 軍事 訓練 の 道具 と 遊び を 目 
的 に 、 プ ロイ セン 王国 の 王様 の た め に 作ら れ た も の で す 。 

この クリ ー グ スピ ー ル に は チェ ス に も 兵 棋 演 習 に も な か っ た 要素 が 追加 され まし た 。 そ の 時 代 ま で の 兵 

演習 は 動か し 方 な どの ルー ル を 決め た チェ ス と 同じ よう な も の で し た が 、 確 率 の 要素 が 加わ っ た の で す 。 
クリ ー グ スピ ー ル で は サイ コロ の 利用 に より 、 確 率 と 乱数 が ゲー ム の シミ ュ レ ーション の 結果 に 影響 する 
よう に な っ て いま す 。 

この お か げ で 兵 棋 演 習 に 確率 の 概念 が 入る こと と な り 、 い まみ な さん が イメ ー ジ し て いる シミ ュ レ ー シ 
ョ ン ゲ ー ム に 近い 道具 立て と 手法 が 実現 する よう に な っ て きま し た 。 
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UM 
図 1-3 1913 年 の H. G. ウェ ルズ に よる 「Wargaming」 


1 _ B 
(“| テー ブル トッ プ の ウォ ー・ ゲ ー ム 
a a i EE EE = = = = = = = = = = = = = = = = EE EE EE EE EE 
ご の よう な 軍人 の 兵 棋 演習 タイ プ の ゲー ム を も と に 、1970 年 代 か ら 199O 年 代 前 半 に シミ ュ レ ー シ ョ 
ン ゲ ー ム の テー ブル トッ プ ゲ ー ム や ボー ド ゲ ー ム の ブー ム が 起き まし た 。 盤 の 上 に 駒 や と き に は 小さ な 人 
形 を 置く タイ プ の ゲー ム で す 。 
最初 は 歴史 的 に 有名 な 戦闘 を 再現 する テー ブル トッ プ ゲ ー ム か ら 始 まり まし た が 、 ま も な く SF や 中 世 
ファ ンタ ジー を モチ ー フ に し た ゲー ム も 増え て きま す 。 
この よう な テー ブル トッ プ の ゲー ム は 、 友達 と 協力 し た り 競 争 し た りす る こと が で き 、 大 会 な どの イベ 
ント も あり まし た 。 そ の 時 代 と し て は 家庭 用 ゲー ム 機 の シミ ュ レ ーション ゲー ム よ り も ルー ル が 複雑 で あ 
り 、 チ ャ レン ジ 的 要素 が 高く 、 あ る 意味 で マル チ プ レイ ヤー に も 対応 し て いる と いう も の で し た 。 


(by Arnaud Ligny) 
図 1-4 イギリス の テー ブル トッ プ タ イ プ の ウォ ー・ ゲ ー ム 「 ウ ォ ー ハ ンマ ー」 
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この テー ブル トッ プ ウ ォ ー・ ゲ ー ム の 影響 下 か ら 『 ダ ンジ ョ ンズ ・ ア ンド ・ ド ラゴン ズ 」 (Dungeons 
& Dragons) と いう 初 の テー ブル トー ク の RPG (Role Playing Game) が 生ま れ ま し た 。 こ れ ら は 複 
数 の ブ プレイヤー が それ ぞ れ パー ティ (チー ム ) の 一 員 の 役割 を 担当 し 、 ゲ ー ム の ルー ル に 従っ て 行動 や 戦 
闘 を 行っ て 冒険 を する と いう スタ イル で し た 。 こ の 「『 ダ ンジ ョ ンズ ・ ア ンド ・ ド ラゴン ズ 」 は コン ピュ ー 
タ を 使っ た RPG ゲ ー ム の 起源 と な っ て いま す 。「 ウ ィ ザ ー ド リィ 』、!『 ド ラゴン クエ スト 』、! ウ ル テ ィ マ 」 
や 1 ファ イナ ルフ ァ ン タ ジ ー』 も 、 タ ダン ジョ ン ・ ア ンド ・ ド ラゴン ズ の シス テム を コン ピュ ー タ 化し た も 
の か ら 発 展 し て き て いる と いえ る で し ょ う 。 


ーー 
| コン ピュ ー タ ・ シ ミュ レー ショ ン ゲ ー ム の は じ ま り 
に トー トート | トート ーー トー トー コー トート ーーー トー ーー ーー トー トー ニート ーー トー トー トー に ーー トー トーー ト ーー| ニ ーーー キー トニ ーー トート トー に トート ーー トー に | 

ここ まで は アナ ログ の シミ ュ レ ーション ゲー ム の 歴史 を 追い か け ま し た が 、 コ ンピュータ と シミ ュ レ ー 
ショ ン ゲ ー ム の 関わ り を 見 て み ま し ょ う 。 

1947 年 に アラ ン ・ チ ュー リン グ (計算 機 科 学 お よび 人 工 知能 の 父 ) が 、 単 純化 し た チェ ス を コン ピュ 
ー タ で 遊べ る よう に し まし た 。 も ちろ ん 当時 の コン ピュ ー タ は 建物 ほど も 大 きく 、 画 面 も ちな く て 、 大 学 や 
政府 の 研究 機関 で し か 利用 し て いな か っ た 非常 に 貴重 な 装置 で し た 。 今 の PC (パー ソナ ルコ ンピュータ ) 
と は 姿 や 実態 は だ いぶ 違い まし た が 、 チ ュー リン グ が 作っ た この チェ ス の ゲー ム は 世界 初 の デジ タル コン 
ビ ョ ー タ ケ ゲーム で し た 。 

同じ 1947 年 に 、 今 度 は トー マス ・ ゴ ー ル ドス ミス (アメ リカ の テレ ビ 業 界 の パイ オニ ア ) が テレ ビ の 
画面 を 利用 し た 世界 初 の ビデ オ ゲ ー ム を 開発 し まし た 。 た だ し 、 こ の ゲー ム は 今 の コン ピュ ー タ や デジ タ 
ル 回 路 を 用 いた ビデ オ ゲ ー ム と は 大 きく 異な っ て お り 、 電 気 科 学 的 な 仕組 み で 実現 され て いま し た 。 作 ら 
れ た の は 、 ビ ピン ボー ル ゲ ー ム の よう な 形 を し た ゲー ム 機 で す 。 そ し て 、 こ ご の 世界 初 の チ テレビ ゲー ム の テー 
マ は ミサ イル を 撃つ シミ ュ レ ーション ゲー ム で し た ! と いう わけ で 、 コ ンピュータ ゲー ム も ビデ オ ゲ ー 
ム も 1947 年 に 開発 され 、 そ の 始ま り は 両方 と も シミ ュ レ ーション ゲー ム だ っ た わけ で す 。 

1970 年 代 に な る と メイ ン フ レー ム と いう 強力 な コン ピュ ー タ が 大 学 に 導入 され 、 コ ンピュータ に 興味 
の ある 学生 が 増え て 、 予 約 さ えす れ ば 誰 で も 使え る 時 代 に な り ま し た 。 こ れ と テー ブル トッ プ ゲ ー ム の 影 


RS 


図 1-5 メイ ン フ レー ム (IBM System/360) 
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シミ ュ レ ーション ゲー ム の 歴史 


響 で 、 学 生 達 は ウォ ー・ ゲ ー ム や テー ブル トー ク RPG を コン ピュ ー タ 上 で 再現 で き な い か 模索 し 始め ま 
し た 。 

これ に より 複雑 で モチ ー フ 性 の 強い ゲー ム が 増え て き て 、 今 の シミ ュ レ ーション ゲー ム の ジャ ン ル が ほ 
と ん ど 固 まっ て きま す 。 当 時 の ルー ル 、 仕 組み や シス テム は 今 の 時 代 の シミ ュ レ ーション ゲー ム に も 受け 
継が れ て いま す 。 


Ry 
| » = » » \ 
( が | 家庭 用 の シミ ュ レ ーション ゲー ム 
Fc FE | PPT = = TE EE P | ギコ FE TE = = Ed Fa Can = Fa = = た 3 SE pe a ea Eee = [em 
1980 年 代 か ら よう や く パ ソコ ン と 家庭 用 ゲー ム 機 が 普及 し 始め 、 さま ざま な ゲー ム が 増え て きま し た 。 
その な か で シミ ュ レ ーション ゲー ム も も ちろ ん 一 般 の 人 に 影響 を 与え る よう に な り ま し た 。 
筆者 の 記憶 の な か で 一 番 古 く 遊 ん だ 家庭 用 ゲー ム 機 の シミ ュ レ ーション ゲー ム は 1983 年 の 
IM.U.L.E.」 (Ozark Softscape 開 発 ) で し た 。 


DAN BUNTIEN S 
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The Game Collect on 


M.U.L.E で は 開拓 惑星 上 で 食料 、 エ ネル ギー、 鉱石 、 宝 石 を 生産 し て 、 ゲ ー ム の 中 で 経済 園 を 作り ます 。 
コン ピュ ー タ が 対戦 相手 に な り ま す が 、 ほ か の ブ プレイ ヤー が 操作 する こと も で き 、4 人 まで の マル チ プ レ 
イ も 実現 し て いま し た (日 本 で も NEC の PC-8801 用 に 移植 され て 販売 され て いま し た )。 

ちな み に 日 本 の 30 代 以上 の 人 に 初め て の シミ ュ レ ーション の ゲー ム を 聞く と 、1985 年 の 「 大 戦略 」 
シリ ー ズ (シス テム ソフ ト )、 と 1988 年 の | ファ ミコ ン ウ ォ ー ズ 」 (任天堂 ) の イン バク ト が 強かっ た よ 
う で す 。 
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種類 


シミ ュ レ ーション ゲー ム の 


/ 本 章 で 勉強 する こと 
e 世 の 中 に は た くさ ん の 種類 の シミ ュ レ ー シ e シミ ュ レ ーション ゲー ム 内 に ある さま ざま 
ョ ン ゲ ー ム が ある な 要素 に つい て 解説 し ます 
e まず シ ミュ レー ショ ン ゲ ー ム を スケ ー ル 別 e ター ン 制 度 、 フ ェ ア プレ イ の 概念 、 地 形 の 
に 3 種類 に 分 類 し て みよ う 影響 、 陣 形 や 協力 ブ プレ イ な どの 特徴 に つい 
e 戦闘 シミ ュ レ ーション と は 異な る 新しい ゲ て 知識 を 深め よう 。 
ー ム の タイ プ も 紹介 し ます 


シミ ュ レ ーション ゲー ム の コン セプト と その 歴史 を 見 た と ころ で 、 今 度 は ゲー ムシ ステ ム と し て の 分 類 
を 考え て みる こと に し まし ょ う 。 た と えば 、 シ ミュ レー ショ ン の 対象 に よっ て も 変わ っ て きま すし 、 新 し 
い タ イプ の シミ ュ レ ーション ゲー ム も 生ま れ て き て いま す 。 こ うい っ た シミ ュ レ ーション 対象 の 違い は ゲ 


シン ミ ュ レ ーション ゲー ム の 種類 


ー ム の 仕組 み (ルー ル ) に も 直接 影響 し て きま す 。 自 分 が どん な タイ プ の ゲー ム を 作っ て みた いか よく 考 


えて 、 既 存 の いろ いろ な ゲー ム も 参考 に し て いき まし ょ う 。 
(た | シミ ュ レ ーション の スケ ー ル 
bg ss [= = I TE a (EE [EE gi I 本 EE 5 [EE CE (EE [CE] ES ET TE Ci (EE [i Ea (CT 1 Ea El TS [EE 

第 1 章 で も 説明 し た と お り 、 シ ミュ レー ショ ン の 対象 に は さま ざま な も の が 考え られ ます が 、 今 回 は 典 
型 的 な ウォ ー・ シ ミュ レー ショ ン ゲ ー ム を 扱い ます の で 、 こ れ ら に つい て すこ し 詳し く 見 て み ま し ょ う 。 
ウォ ー・ シ ミュ レー ショ ン ゲ ー ム の 場合 、 戦 争 (ある い は 戦闘 ) を ゲー ム の シス テム や ルー ル で どう 表現 
する か が 主眼 と な り ま す 。 

戦争 か ら 戦闘 を シミ ュ レ ーション する ゲー ム で は 、 基 本 的 に 戦い の スケ ー ル (規模 ) で ゲー ム の 仕組 み 
や ユニ ッ ト が 変わ っ て きま す 。 そ の た め ゲ ー ム の スタ イル を 大 きく 3 つの 種類 に 分 け て みる こと に し まし 
ょ う 。 こ ご ここ で は 「 戦 争 ス ケー ル 」 「 作戦 ス ケー ル 」「 戦 
術 ス ケー ル 」 に 分 け て シミ ュ レ ーション ゲー ム を 考え 
て み ま す 。 


し 
| 


小さ な 視点 


図 2-1 スケ ー ル に よる ゲー ム の 分 類 


| 戦争 スケ ー ル 


ドーー ト ーーー ニニ ーー オーー ト ーー レー トーー ナ ーー トー ニー ニー に ーー テニ 


「 、 タ ー ン : 数 日 か ら 数 週間 | 
マス : 数 十 キ ロメ ー ト ル 以 上 師団 只 軍 団 | 数 10km 
] ユニ ッ ト の 単位 : 数 百 数 千 人 | 


こと の スケ ー ル の ゲー ム で は プレ イヤ ー は ひと つの 戦い で は な く 、 戦 争 と いう 出来 事 を シミ ュ レ ーション 
する こと に な り ま す 。 プ レイ ヤー は 大 ま か に 国 を 単位 と し て ユニ ッ ト を コン トロ ー ル を し な が ら 相 手 国 と 
戦い ます 。 タ ー ン は 数 日 か ら 数 週間 くら い 。1 マ ス は 数 十 キ ロメ ー ト ル 程 度 に な り ま す 。 ユ ニッ ト は 数 百 
か ら 数 千 人 単位 の 師団 や 軍団 の ゲー ム が 多い で し ょ う 。 そ し て 移動 と 戦い は 基本 的 に 隣 の マス に 限り ます 。 
こと の 分 野 の ボー ド ゲ ー ム は 多い で す が 、 ビ デオ ゲー ム で この 規模 の ゲー ム は 最近 で は 少な く な っ て いま す 。 


( スルメ スル K スルメ メル ミ メス ルミ メル トミ スル ミ メ メル トミ メス ルミ ヌメ ルミ メル K メス ルム メル トメ スル ミ メ メル K ミ メル ミ メ メル ミ スル ミ メ メル メメ ルミ メ メル ミ 1 は) 9 


「 エ イジ オブ エン パイ ア 」 シリ ー ズ (http://www.ageofempires.com/) が この スケ ー ル の シミ ュ レ ー 
ショ ン の 代表 だ と 考え られ ます 。 


| 作戦 スケ ー ル 


a = UE EE EE TEE ESE OE EE ES A (EE EE CE [EE EE EE EEE EE [EE RES [EE EE IEE EE EE EE [ED CE EE [EE | ET (EE EE CE EE [ES EE 1! 


02 


| 、 タ ー ン : 数 時 間 か ら 数 日 2 必 
マス : 数 キロ メー トル 以上 数 km 
ユニ ッ ト の 単位 : 数 十 ~ 数 百人 、、 ン | 


作戦 級 の ゲー ム で は プレ イヤ ー は ひと つの 大 隊 や 中 隊 く らい の 単位 を 受け 持つ こと と に な り ま す 。 ゲ ー ム 
が 対象 と する の は 戦略 スケ ー ル に お ける 戦闘 くら い の 範 囲 で す 。 こ の スケ ー ル の ゲー ム で は 戦闘 を する 単 
位 以外 に リソー ス (食料 や 武器 な どの 資源 ) の 管理 、 建 物 や 研究 な どの シミ ュ レ ーション も 含ま れ て いま 
す 。 こ の スケ ー ル の ゲー ム の タイ トル は 比較 的 多く あり まし た が 、 最 近 は ほとん ど が シリ ー ズ ゲー ム に な 
っ て き て いる よう で す 。 こ ご の スケ ー ル の 代表 的 な タイ トル と し て は 『 ス ター クラ フト 』 シ リー ズ (http:// 
us.blizzard.com/en-us/games/) や 「 信 長 の 野望 | シリ ー ズ (http://www.gamecity.ne.jp/) な ど 
が 考え られ ます 。 


〇 | 戦術 スケ ー ル 
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ター ン : 数 秒 か ら 数 分 に 
マス : 数 メー トル ] 数 m = 
ユニ ッ ト の 単位 : 1 人 、1 機 | 


戦術 スケ ー ル の ゲー ム で は プレ イヤ ー は 数 ユニ ッ ト の ひと つの 小さ な 戦い の シミ ュ レ ーション を し て い 
ます 。1 タ ー ン は 数 秒 か ら 、1 つ の マス は 数 メー トル 、1 つ の ユニ ッ ト は 1 キャ ラク ター 程度 で す 。 こ の ス 
ケー ル の ゲー ム は キャ ラク ター に フォ ー カ ス を する の で RPG 的 な 要素 を 持つ こと も あり ます 。 戦 術 は 英 
語 で 言う と Tactics で す 、 し た が っ て 「 フ ァ イ ナ ルフ ファンタジー タク ティ クス 」 (Final Fantasy 
Tactics) な ど タ イト ル に Tactics が 入 つ て いる ゲー ム は 基本 的 に この スケ ー ル に 当て は まる で し ょ う 。 
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シミ ュ レ ーション ゲー ム の 種類 


| | シミ ュ レ ーション ゲー ム の 新しい ジャ ン ル 
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上 の 3 つの スケ ー ル 以外 に も いく つか シミ ュ レ ーション の ゲー ム の ジャ ン ル が 存在 し ます 。 近 年 流行 の 
サブ ジャ ン ル と し て タワ ー デ ィ フェン ス 系 と MOBA 系 を 紹介 し て お きま す 。 


タワ ー デ ィ フ ェ ン ス 


陳 
図 2-2 [Plants VS. Zombies] 
(© 2014 Electronic Arts Inc. Plants vs. Zombies, PopCap, EA and the EA Logo are tademarks of Electronic Arts Inc. 


タワ ー デ ィ フ ェ ン ス は 防御 に 注目 し た ゲー ム で す 。 ゲ ー ム の 勝利 条件 は ほか の シミ ュ レ ーション ゲー ム 
と だ いぶ 異な り 、 相 手 を 全滅 させ る の で は な く 、 自 分 が 最後 まで 生き 残る こと で す 。 こ の ジャ ン ル の ゲー 
ム で は 、 プ レイ ヤー は 動か な い ユ ニッ ト を 配置 する こと で 自分 の 基地 を 敵 の 大 軍 か ら 守 り ま す 。 ユ ニッ ト 
の 配置 、 そ れ ら の 成長 と 全体 的 な リゾ ソース 管理 が 非常 に 大 切 と な り ま す 。 こ の スタ イル は 昔 か ら あ り 、 も 
と も と マイ ナー な ジャ ン ル で は あり まし た が 最近 で は IPlants vs. Zombies』 シリ ー ズ (http://www. 
popcap.Com/plants-vs-zombies-1) の お 陰 で 注目 され る よう に な っ て きま し た 。 
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MOBA (Multiplayer Online Battle Arena) 系 の ゲー ム は ある 意味 タ 々 ワー ディ フェ ンス 系 の 真 逆 で す 。 
MOBA で は プレ イ ヤー は 自分 の リソー ス と 研究 (アッ プ グ レー ド ) で 自分 の ユニ ッ ト を 短 時 間 で た くさ 
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ん 作り 、 敵 軍 と 戦わ せ て 基地 を 破壊 する こと が 目標 に な っ て いま す 。 防御 は ほとん ど 関 係 な く 、 攻 撃 す る 
こと が 重視 され て いま す 。 こ の ゲー ム の ジャ ン ル は | ウォー クラ フト 」 (http://us.battle.net/wow/ 
en/game/guide/) の プレ イヤ ー 達 が その ゲー ム の マッ プ エ デ ィ タ を 利用 し て 作っ た ゲー ムシ ステ ム が 
元 に な っ て いま す 。 今 は この ゲー ムシ ステ ム を 元 に カジ ュ ア ル ゲ ー ム が た くさ ん 登場 し て き て いま す 。 
2012 年 に 登場 し て 人 気 ゲ ー ム に な っ た 「『 に ゃ ん ご 大 戦争 』 (http://Wwww.ponos.co.jp/iphone/jp/ 
appli/battlecats/battlecats.htm) は その ひと つと いえ る で し ょ う 。 


(2| シミ ュ レ ーション ゲー ム の ゲー ムシ ステ チム 


ーー トー トー トー トー ニー トー ニー ーー トト ーー「ー ニ ニート ーー ニー トー に ーー リー に ーー トー トニー ーー トー に = に = に 

シミ ュ レ ーション ゲー ム は た くさ ん あっ て 、 そ れ ぞ れ に いろ いろ な 機能 と ゲー ム メ カニ ズム が あり ます 。 
で も シミ ュ レ ーション を 代表 する 典型 的 な シス テム も あり ます 。 も ちろ ん これ ら は 必須 で は な く 、 こ れ ら 
の 有無 が シミ ュ レ ーション ゲー ム で ある こと を 決め て いる わけ で も な い の で す が 、 シ ミュ レー ショ ン ゲ ー 
ム で 遊ん だ り ゲ ー ム デザ イン し た りす る と き に は 、 こ うし 特徴 を 意識 する と よい と 思い ます 。 


ター ン 制 と リア ル タ イ ム 制 


これ は ゲー ム 中 の 時 間 の 流れ を どの よう に 管理 する か と いう 方 法論 で す 。TBS (Turn-Based 
Strategy) は ター ン 制 に よる 管理 方 法 で ブ プレイヤー (ある い は コン ピュ ー タ が ) が 順に 行動 し て いく と 
いう も の で す 。 一 方 、RTS (Real-Time Strategy) は ゲー ム の 中 の 時 間 の 流れ が 決ま っ て お り 、 そ の 流 
れ の 中 で 行動 し ます 。 タ ー ン 制 の ほう が 次 の 行動 を ゆっ くり 考え る 時 間 が あり ます が 、 リ アル タイ ム 制 の 
場合 は 同じ 行動 を し て も タイ ミン グ に よっ て 結果 が 異な っ て きた り 、 行 動力 や 決断 力 が ゲー ム の 一 要素 に 
な っ て きま す 。 


フェ アプ レイ 


シミ ュ レ ーション ゲー ム で は 自分 と 相手 の ユニ ッ ト は 基本 的 に 同じ くら い の 強 さや 性 能 を 持つ て いま 
す 。 そ の 理由 は お 互い が フェ アプ レイ を し て いる と 戦略 が 重要 要素 と な り 、 よ り 高 い 戦略 を 持つ プレ イヤ 
ー が 勝つ こと に な る か ら で す 。 逆 に 物語 要素 の 強い RPG 的 な ゲー ム で は 自分 と 相手 の 性 能 に 違い が あり 
ます 。 た と えば 「『 フ ァ イ ナ ルフ ァ ン タ ジ ー」 シリ ー ズ で は 、 プ レイ ヤー キャ ラ と 敵 キ ャ ラ の HP と ダメ ー 
ジ に 桁 が 異な る ほど の 差 が つい て いま し た 。 


リゾ ソース 管理 


ゲー ム 中 に は お 金 や 資源 な どの リソー ス が あり 、 そ れ ら を 増やせ る よう に な っ て いま す 。 リ ソー ス は ユ 
ニッ ト を アッ プ グ レー ド す る た め の 研 究 費 用 と し て 、 あ る い は 新 ユ ニッ ト の 生産 で 利用 で きま す 。 こ の 仕 
組み に よっ て プレ イヤ ー は ゲー ム 中 に 成長 し て いく こと に な り ま す 。 


トス メル メ スル ミ メル k ム メル トミ メル トメ スル トミ メス ルミ メル トミ メス ルミ メル トミ メル トミ メル トメ メル メ メメ スルメ メル メ メル トミ メス ルミ メル K メル K ミス ルミ 1) 


ユニ ッ ト の 視界 


プレ イヤ ー が 見 える 物 と ユニ ッ ト に 見 える 物 は 異な り ま す 。 プ レイ ヤー は ゲー ム 全 体 を 見 渡す こと が で 
きま す が 、 各 ユニ ッ ト は 行動 範囲 が 限定 され ます 。 た と えば 、 プレ イヤ ー か ら は 敵 の 位置 が 見 えて いて も 、 
ユニ ッ ト の 攻撃 範囲 の 外 に ある 場合 は 攻撃 で きま せん 。 
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図 2-4 プレ イヤ ー の 見 えて いる 範囲 と ユニ ッ ト に 見 えて いる 範囲 は 異な る 


地形 の 影響 


シミ ュ レ ーション ゲー ム の フィ ー ル ド (マッ プ ノ 面 ) に は いろ いろ な 地形 の タイ プ 、 高 さ 、 障 害 物 な ど 
が 表現 され ます 。 こ うし た 地形 を 戦略 的 に 利用 する こと が 可能 で す 。 地形 を 活用 する こと で 状況 が 有利 に 
も 不利 に も 働き ます 。 た と えば 、 高 い 所 か ら 低 い 所 を 攻撃 する と 攻撃 力 が 上 が る 、 ま た は 平ら な 草原 より 
森 で 移動 する ほう が 移動 力 を 消費 する な ど で す 。 
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ZOC (Zone of Control) 


それ ぞ れ の ユニ ッ ト は 自分 の 周り の マス に 影響 を 与え られ ます 。 こ の 影響 範囲 を ZOC (Zone of 
Control) と 呼び ます 。 た と えば 、ZOC 内 で は 敵 ユ ニッ ト が 自由 に 移動 で き な い 、 逃 げ る と 自動 的 に 攻撃 
され る 、 ま た は ZOC に は 入れ る が 通過 が で き な い な どの ルー ル を 設け て いる 場合 が あり ます 。 


図 2-5 Zone of Control の 概念 


ユニ ッ ト の 向き 


ユニ ッ ト に は 、 正 面 、 側 面 、 背 面 な ど が 表現 され て いる こと が あり ます 。 た と えば 、 背 面 か ら 攻 撃 を す 
る と 正面 か の ら そ の ユニ ッ ト を 攻撃 する より も 防御 力 が 下がる な ど で す 。 


図 2-6 背面 か ら 攻 撃 
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陣形 な どの 影響 


複数 の ユニ ッ ト が 同じ 敵 を 囲む と その 敵 の 防御 力 は 下がり ます 。 


両側 か ら の 攻撃 で 防御 カタ ウン 


図 2-7 挟ん で 連係 攻撃 


協力 ボー ナス 


ユニ ッ ト の 近く の 味方 か ら 影 響 が 与え られ る 、 ま た は 味方 に 対し て 影響 を 与え る こと が で きま す 。 た と 
えば 、 リ ー タ ダー 級 の ユニ ッ ト は 周り の ユニ ッ ト を 強く する 、 ま た は 仲良 し の ユニ ッ ト が 近い と 両方 が 盛り 
上 が る こと で 戦闘 カ が アッ プ す る な ど で す 。 


パ 味方 ステ ー タ ス ア ッ シー Z 
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図 2-8 協力 ボー ナス 


こ で は シミ ュ レ ーション の ゲー ムジ ャ ン ル や ルー ル に つい て 考察 し て きま し た 。 こ れ ら を 踏ま 
えて 、 次 の 草 で は これ か ら ご この 本 で 作る シミ ュ レ ーション ゲー ム の デザ イン を 考え て みる こと に し まし ょ 
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ゲー ム 企 画 書 (GDD) を 
書い て みよ う 


本 草 で 勉強 する こと 
eGDD は ゲー ムコ ン セ プ ト と 開発 の た め の e イラ スト や 図 を 工夫 し て イメ ー ジ し や すい 
設計 図 も の に し よう 
e プ レイヤー の た め に で は な く 開 発 を する 人 e 典型 的 な GDD、 完 全 な GDD と いう も の は 
の た め に 作ろ う な い 。 開 発 チー ム の 個性 に 応じ た 自分 な り 
eGDD は 変化 する 。 開 発 の 各 フ ェ ー ズ で 順 の GDD を 作ろ う 
次 GDD を 修正 し て いこ う 


プロ グラ マー、 ア ー テ ィ ス ト 、 ゲ ー ム デザ イナ ー 各 1 名 、 ま た は それ 以下 の 規模 (最近 だ と イン ディ ー 
ズ と 呼ば れる ゲー ム 開 発 ス タイ ル ) だ と 、 し っ か り と し た ゲー ム の 企画 書 を 用 意 す る 必要 は あま りあ り ま 


ゲー ム 企 画 書 (GDD) を 書い で みよう 


せん 。 逆 に 、 小 規模 な の に や た ら に 企画 書 に 凝り すぎ ざる と 、 い つま で た っ て も 完成 し な い 和 失敗 企画 の 元 に 
な っ た り し ます 。 も ちろ ん 、 規 模 が 大 きく な っ て くれ ば 、 企 画 書 の 重要 性 は 増し て きま す 。 

小 規模 の チー ム で あれ ば 、 自 分 た ち が 何 を 作り た いか は 簡単 に 共有 で きま すし 、 途 中 で 大 幅 な 変更 が あ 
っ て も 、 そ れ ぞ れ の 役割 を 理解 し て 、 問 題 を 解決 し て いけ ます 。 し か し 、 最 低 限 の 方 針 を 決め た り 、 メ ン 
バー で 共有 する メモ や 手引 書 、 参 考 資 料 な ど は 準備 し た ほう が よい で し ょ う 。 

今回 、 み な さん と 一 緒 に 作っ て いく ゲー ム は 小 規 模 な 開発 を 想定 し て いる の で 、 完璧 な 企画 書 は 必要 な 
いか も し れ ま せん 。 し か し 、 本 書 で は 読者 の 皆さん が 将来 的 に ゲー ム 開 発 プ ロジ ェクト を 推進 する こと を 
イメ ー ジ し て 、 一 連 の 流れ を 説明 し て みよ うと 思い ます 。 ま た 、 こ ご の 本 で 開発 する ゲー ム に 関し て 、 読 者 
の 皆さん と の 共通 認識 が 得 ら れる よう に 、 開 発 内 容 を 決め て お きた いと 思い ます 。 


a 
1 a 
( が | アイ デア を 形 に 、 ゲ ー ム 企画 書 (GDD) と は 
人 ii 
で は 、 ま ず ゲ ー ム の 企画 書 (GDD: Game Design DocumenD と は どん な も の で し ょ うか ? 
Wikipedia で は 次 の よう な 説明 が あり ます 。 


ゲー ム デ ザイ ンド キュ メン ト (GDD) と は 、 ビ デオ ゲー ム に 関す る 設計 に つい て 絶え ず 更新 
され 、 ま た は 編集 され て いく 企画 書 の こと で ある 。GDD は 、 開 発 チ ー ム に よっ て 作成 され 、 
編集 され る も の で あり 、 そ し て それ は 開発 チー ム 内 の 取り 組み を 整理 する た め に 主として ゲ 
ー ム 開発 企業 で 使用 され る も の で ある 。 そ の ドキ ュ メ ント は 、 ゲ ー ム 開発 が 進行 され る あい 


だ ずっ と 使用 され る 指導 的 な 役割 を 果たす ビジ ョ ン と し て 、 チ ー ム の ゲー ム デ ザイ ナー、 ア 
ー テ ィ ス ト 、 プ ログ ラマ ー と の コラ ボレー ショ ン に より 生み 出さ れる 。-wikipedia (英語 ペ 
ー ジ か ら 訳 出 ) 


この 説明 を も と に 、 こ こ で は GDD に つい て 3 つの ボイン ト を 挙げ て お きま し ょ う 。 

・ ゲ ー ム 開発 者 達 に よっ て 作成 され る ドキ ュ メ ント (資料 ) で ある こと 

・GDD の 対象 と な る 読者 は 、 各 分 野 の ゲー ム 開 発 者 達 で ある こと 

・ 絶 え ず 更新 され 、 ま た は 編集 され て いく ドキ ュ メ ント で ある こと 

それ ぞ れ に つい て ポイ ント を 見 て いく こと に し ます 。 
ゲーム 開発 者 達 に よっ て 作成 され る ドキ ュ メ ント で ある こと 

GDD は 通常 、 開 発 経験 の ある ゲー ム デ ザイ ナー、 ア ー テ ィ ス ト 、 プ ログ ラマ ー 達 が 集まっ た 開発 チー 
ム メ ン バ ー が 、 自 分 た ち で 使う 目的 で 作成 し ます 。 開 発 チ ー ム が 一 人 の 場合 は 、 こ うい っ た も の を 一 人 で 
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作成 し な けれ ば な ら ず 、 未 経験 者 に と っ て は 大 変 か が あし れ ま せん が 、 で きる か ぎり の 想像 力 を 働か せ て 作 
成す る と よい で し ょ う 。 

GDD の 対象 と な る 読者 は 、 各 分 野 の ゲー ム 開 発 者 達 で ある こと 

GDD を 制作 し た 経験 が あま りな いと 、 プ レイ ヤー (ユー ザー) 目線 で GDD を 作っ て し まう 傾向 が あり 
ます 。 し か し 、GDD の 読者 は ゲー ム 開 発 者 で ある た め 、 開 発 者 達 が その GDD を 見 て 開発 内 容 が 分 か る よ 
うに し ます 。 よ く で きた GDD に は 、 タ ー ゲ ッ ト 、 ゲ ー ム プレ イ 、 ゲ ー ム アー ト 、 レ ベル デザ イン 、 ス ト 
ー リ ー、 キ ャ ラク ター や ビジ ネス の こと が 簡潔 か つ 明 確 に 纏め られ て いる も の で す 。 

絶え ず 更新 され 、 ま た は 編集 され て いく ドキ ュ メ ント で ある こと 

ゲー ム の 開発 に は 複数 の 開発 段階 が あり ます 。 ま た 、 最 近 の ゲー ム は 、 プ レイ ヤー の 動向 に 応じ て 、 絶 
え ず アッ プ デ ー ト や 改善 が 行わ れ て いき ます 。 こ の よう な 開発 フェ ー ズ に 合わ せ て 、GDD は し ば し ば 変 
更 され 、 改 編 さ れ 、 拡 張 さ れ て いく こと に な り ま す 。 当初 の GSDD は 、 い くつ か の コン セプト と アウ トラ 
イン か ら 始 まり 、 次 第 に 完成 形 に な つて いき ます 。 各 開発 工程 か ら プ ロジ ェクト が 終了 する まで 、 常 に 指 
針 の 役割 果たし て いく と と に な る の で す 。 


ゲー ム 開 発 の 3 つ ( 二 1) の フェ ー ス 7 
さき ほど | ゲー ム の 開発 に は 複数 の 開発 段階 が ある ] と 説明 し まし た が 、 商 業 向 き の 


ゲー ム の 開発 で あれ ば 大 きく 3 つの 開発 フェ ー ズ と 運用 フェ ー ズ が あり ます 。 こ の 本 で 

は 一 人 (ある い は 数 人 ) で 開発 し て いく こと が 前 提 で す が 、 開 発 工程 に つい て も 一 応 

頭 に 入れ て お く と 便利 で す 。 

コシ セプト ワー ク 

GDD は 、 まず コン セプト ドキ ュ メ ント と いう 形 で 始ま り ま す 。 こ こ で 一 番 重要 な こと は 、 

この 時 点 で の 企画 の セー ルス ポイ ント (達成 すべ き 方 針 と 目標 ) が 記載 され て お り 、 開 

発 者 達 に に っ て どの くら い 魅 力 的 か (つまり 、 こ の ゲー ム が いか に 他人 に 興味 を 持っ て 

も ら え る か が ) で す 。 

プリ プロ タダ クション 

次 の フェ ー ズ で は 、 コ ン セ プ ト に 沿っ て 、 実 際 に ゲー ム を 簡単 に 製作 し て み ま す (ゲー 

ム の タイ プ に よっ て は ペー パー プロ ト タ イ プ で も 可 )。 製作 を し て いく な か で 、 開 発 チ ー 

- ム の メン バー と 活発 な 意見 交換 を し て 、 出 て きた さま ざま な アイ デア を メモ し ます 。 こ 

れ ら を まとめ て いく こと に よっ て 、 ど の アイ デア が この ゲー ム に と っ て 適切 な も の で ある 

の か を 判断 し 、 取 捨 選択 し ます 。 こ の 段階 で 重要 な の は 、 こ の ゲー ム の 本 質 的 な アイ 

デア を 見 抜き 、 それ を ブラ ッシュ アッ プ し て いく ぐ こ と で す 。 

製作 、 プ ロタ ダク ショ ン 

製作 フェ ー ズ に 進む と 、 ゲ ー ム の コア と な る 部 分 は 固まり 、 簡 単に 内 容 変 更 が で き な 

い 状 況 に な っ て いま す 。 も ちろ ん 開発 チー ム の 了承 の うえ で 変更 し て も 問題 あり ませ ん 

が 、 影 響 は 大 きく な り ま す 。 こ の フェ ー ズ で は 、 実際 に リリ ー ス する ゲー ム の 開発 が 進 

ん で いる の で 、 出 来 上 が っ て いく ゲー ム に つい て デバ ッ ク と いう 作業 も 発生 し ます 。 
] (を ) 
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ゲー ム 企 画 書 (GDD) を 書い で て み よう 


運用 

実際 に ゲー ム を リリ ー ス し た あと は 、 運 用 と いう フェ ー ズ に な り ま す 。 こ の フェ ー ズ で は 、 
今 ま で GDD に 記載 で き な か っ た (優先 で き な か っ た ) アイ デア 、 プ レイ ヤー か ら の 意 
見 の 取り 込み 、 あ る い は 開発 途中 に 思い つい た アイ デア が 実現 で きる よう に な り ま す 。 
製作 フェ ー ズ で GDD に 記載 で き な か っ た 場合 で も あき ら め る 必要 は まっ た く あ り ま せ 
ん 。 ゲ ー ム が 安定 的 に 稼動 し た と き に 、 再 度 ア イデ ア が 実現 で きる か 、 開 発 メ ン バ ー 
に 相談 し て みる と よい で し ょ う 。 た だ し 、 ゲ ー ム の 面白 さ の 向上 に 合う も の で ある か と 
いう 点 を 常に 目 間 上 自 答 し て ほし く 思 いま す 。 


、 
lI oe R ニ 
| これ か ら 作る ゲー ム の 話 
ニー | に に で TNIWNyouoo ey 
さて 、 こ ご ここ か ら は 実際 に 私 た ち が 作 る ゲー ム に つい て 考え て いき まし ょ う 。 本 当 は 読者 の 皆さん に 会 っ 
て 色々 と 話し 合い な が ら ゲ ー ム の 題材 な ど 決 め て いけ る と ベス ト で す が 、 紙 面 の 都合 上 それ は 難し い の で 、 
こち ら か ら 色 々 と 提案 する 形 で 進め て いき ます 。 
まず は 概要 か の ら で す 。 ゲ ー ム の ジャ ン ル は 、 シ ミュ レー ショ ン ゲ ー ム (も ちろ ん ! )、 そ の 中 で も 前 章 
で 話し た タク ティ クス 分 野 の ゲー ム を 作る こと に し ます 。 ま た 中 世 風 の 騎士 物語 的 な モチ ー フ は あり が ち 
な の で 、 今 回 は 海賊 を 題材 と し ます 。 あ と は マー ケティング 予算 な ど は あり ませ ん の で 、 で きる だ け 多 く 
の 人 に 遊ん で も ら う こと を 前 提 に 、Web ブ ラウ ザ で 動く ゲー ム を 作り まし ょ う 。 
次 に 、 ゲ ー ム の 内 容 に 関し て コン セプト を 出し あっ て 軽く ブレ イン スト ー ミ ング (プレ スト ) を し まし 
よ つ 。 


モチ ー ノ は 海賊 
・ 海 賊 船 ・ 大 砲 な どの 武器 
・ 海 や 島 を 探索 する ・ 港 で モノ を 買っ た り 、 売 っ た り で きる 
・ ほ か の 海賊 船 と 戦う 、 宝 の 奪い 合い ・ 海賊 に は キャ プ テ ン が 存在 
・ ロ マン ある スト ー リ ー ・ 新 し い 海 賊 仲間 を 増やし て いく 
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アイ デア と ゲー ム 企 画 と の 関係 r= 
企画 を 考え る 際 に 、 ち ょ っ と 注意 し て お きた いこ と が あり ます 。 それ は 、 ア イデ ア を 出 


すこ と 自体 に それ ほど 重要 性 は な いと いう こと で す 。 

も し 、 あ な た が じっくり と ゲー ム の 特徴 を 考え た 場合 、 い ろ い ろ な アイ デア が 出 て くる 
は ず で す 。 し か し 、 大 切な の は その アイ デア が ゲー ム と し て 使え る か どう か 、 開 発 に 繋 
が る アイ デア な の か どう か で す 。 現在 の 開発 の 体制 (開発 期間 知識 ゲ プ ラッ ト フ ォ ー 
ム ) で どの よう に 実現 で きる か を 考え 、 最 終 的 な 取捨 選択 の 判断 を し ます 。 取捨 選択 
を 通過 し て 初め て 、 ゲ ー ム の 企画 に 繋が る アイ デア と いえ る と いう こと で す 。 

初期 の コン セプト の 段階 で イイ デア を 出す こと は 必要 か も し れ ま せん が 、 最 終 的 に ゲ 
ー ム 開発 に 繋が る アイ デア に 落と し 込む こと が 重要 で す 。 


ちょ っ と 考え る と いろ いろ と な 面白 い ア イデ ア が 湧い て きま す 。 し か し 、 今 回 は 読者 の みな さん の 余暇 
の 時 間 で ゲー ム を 作る の で 、 時 間 と 開発 能力 、 そ の 他 を 勘案 し て いっ た ん 、 以 下 の よ うな 厳し い 制 約 を 設 
け ま し ょ う 。 面 白い アイ デア は 最初 の 開発 が 終っ た あと に 、 運 用 フェ ー ズ で 追加 する こと を お 勧め し ます 。 


・ ブ プラ ウザ で 動く ゲー ム に する 

・1 回 の ゲー ム プ レイ 時 間 は 5 分 前 後 

・ 開 発 期間 は 1 か 月 以内 

・ キ ャ ラ 数 は 、 コ スト 面 を 考え て あま り 増 や さ な い 

・ 本 格 的 な スト ー リ ー や RPG 的 な 要素 は 、 時 間 が か か る の で 今回 は 採用 し な い 


最初 に 説明 し た と お り 、 こ れ か ら GDD は 変化 し て いき ます が 、 ま ず は 初期 の コン セプト ワー ク 段 階 で 
の GDD を 確認 し て み ま す 。 

GDD を 書く ツー ル は 自由 で す が 絵 な ど が あっ た ほう が よい の で グラ フィ ッ ク を 扱う 機能 が あっ た ほう 
が よい で し ょ う 。 こ こ で は ほか の 関係 者 に プレ ゼン する こと も 前 提 に Microsoft PowerPoint を 使っ て 
作っ て いき ます 。 
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ゲー ム 企 画 書 (GDD) を 書い で て みよう 


(た | GDD① や ー ゲ ー ム の 概要 
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Pirarr Tacrics 

パイ レー ツタ クティ クス 

arTTLES AT Hicm Srs 
外海 の 戦い 


バイ レー ツ ・ タ クティ クス は 海賊 が 戦う カジ ュ ア ル な 


バッ ク グ ラウ ンド 


バイ レー ツタ クティ クス は 、 海 賊 の ロマ ン を ベー ス に 開発 する オリ ジ ナ ル IP (独自 
の 知 的 財産 ) で す 。 


ター ゲッ ト PE KA エミ 


客層 : タク ティ クス や シミ ュ レ ーション が 好き な プレ イヤ ゼー アタ 
場面 : 短 時 間 に 気 軽 に 遊べ る 、 カ ジュ アル ゲー ム / - 
プラ ッ ト フ ォ ー ム : ブラ ウザ ゲー ム (サー バー 無し ) OO と 


a i EN 

<・ 力 ジュ アル タク ティ カル シミ ュ レ ーション 
・ ス キル を 利用 し て 勝利 を 手 に 入れ よう ! 、.、 
*・Twitter で プレ イ の 結果 を シェ ア 出 来 ま す ! 


図 3-1 初期 段階 の GDD① (ゲー ム の 概要 ) 


タイ トル と サブ タイ トル に つい て 

ゲー ムタ イト ル は 、 ゲ ー ム コン テン ツ と 一 致す る も の で 、 し っ か り と 意味 が あり 、 記 憶 さ れ や すぐ 、 思 
い 出 され や すい も の で ある ほう が よい で し ょ う 。 ま た 、 第 三 者 に よっ て 使用 され て いな い (商標 登録 等 が 
され て いな い ) 必要 が あり ます 。 サ ブタ イト ル を 加え る 場合 あり ます 。 サ ブタ イト ル を 加え る こと に よ 
り 、 ゲ ー ム の 様子 が より 伝わり や すく な り ま す 。 
ゲー ム 概 要 (エレ ベー ター ビ ピッチ) 

最初 に ゲー ム の 概要 を 記載 し ます 。 そ こ で は 、 こ の ゲー ム の 特徴 (どの よう な ゲー ム で ある の か ) を 簡 
単に 説明 し て いき ます 。 詳細 に つい て は 、 以 降 の 各 パ ー ト で 明らか に な り ま す の で 、 こ こ で は ゲー ムコ ン 
セプト に つい て 最も 重要 な こと を 説明 し て いき ます 。 
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短い 言葉 で も すぐ に 興味 を も っ て 
も ら え る よう に する の が 大 切 で す 


エレ ベー ター ピッ チ (Elevator Pitch) と は 、 
[迅速 か つ 明 確 に 短い 時 間 で 相手 に 価値 あ 
る 情報 を 伝え られ る か | と いう 意味 で 使わ れ 
ます 。 そ の 内 容 は 、 ケー スバ イケ ー ス で す が 、 
口頭 な ら 時 間 の イメ ー ジ は 30 秒 以下 で す 。 
な ぜ | エレ ベー ター] か と いう と 、 エ レベ ー 
ター で 出会っ た 相手 に 対し て 、 そ の ちょ っ と 
し た 時 間 を 活用 し て 相手 に 興味 を 持っ て も ら 
える よう な 説明 が で きる 、 と いう 考え か ら 来 
て いま す 。 あ まり 独創 的 な 方 法 で は あり ませ 
ん が 、 誰 で も 分 か る よう な 有名 な タイ トル ( ゲ 
ー ム 、 映 画 な ど ) を 利用 し て 例え る と いう 方 
法 も あり ます 。 


バッ ク ゲ ラウ ンド 

ここ で は 、 ど の よう な 背景 で この 企画 が 行わ れ た か 、 ま た どの よう な 環境 で 開発 を 進め る の か を 説明 し 
ます 。 た と えば 、 オ リ ジ ナ ル IP ( 知 的 財産 ) の ゲー ム な の か 、 有 名 な IP を 利用 する の か 、 ご の ゲー ム の 企 
画 に 影響 を 与え を た ゲー ムコ ン セ プ ト の 有無 を 説明 し て お く と よい で し ょ う 。 ま た 、 開 発する ツー ル や ゲー 
ム エ ン ジン な ど が 決ま っ て いる 場合 は 、 そ の 情報 も 説明 し て お きま し ょ う 。 

ター ゲッ ト オ ー デ ィ エ ンス & プ ラッ ト フ ォ ー ム 

ゲー ム の 対象 者 は 誰 な の か 、 ど の よう な 人 が 興味 を 持っ て くれ る の か 、 そ れ ら の 人 々 は どん な 属性 を 持 
つの か を 想定 し て いき ます 。 た と えば 、 多 く の コ ン シ ュ ー マ ー ゲ ー ム は 、 プ レイ ヤー に 長 時 間 の プレ イ を 
要求 し ます 。 そ の か わり 、 プ レイ ヤー は ゲー ム の プレ イ を 通じ て より 深み の ある 体験 が で きま す 。 一 方 、 
カジ ュ ア ル ゲ ー ム (モバ イル ソー シャ ル ゲ ー ム や PC ブラ ウザ ゲー ム な ど ) は 、 プ レイ ヤー に 対し て 長 時 
間 の 拘束 を 要求 し ませ ん 。 ほ か の 活動 の 合間 に も 気軽 に ゲー ム プ レイ が 可能 と な り ま す 。 ま た 、 プ レイ ヤ 
ー に プレ イ に 関す る 記憶 を 要求 する も の は 少な く 、 短 時 間 で ゲー ム を 楽し め る よう に な っ て いま す 。 
チー ム の 能力 と 労力 も 考え て 、 ど の プラ ッ ト フ ォ ー ム を 採用 する か も 考え まし ょ う 。 十 分 な 開発 経験 も 
な いま ま コ ン シ ュ ー マ ー ゲ ー ム を 作る の は 現実 的 で は あり ませ ん 。 そ う で あれ ば 、Web や モバ イル 向け 
の ゲー ム を 開発 し た ほう が 安全 か も し れ ま せん 。 ま た 、 ゲ ー ム が マル チ プ レイ も し く は ソー シャ ルネ ッ ト 
ワー ク と 関係 し て いる の で あれ ば 、 そ れ も 記 載 し て お きま し ょ う 。 

ーー ザー デー 

ゲー ム の 重要 な 要素 (特徴 ) を まとめ て いく セク ショ ン で す 。 と くに 既存 の ゲー ム よ り も 優れ て いる 点 
を まとめ 、 目 指す べき ゴー ル も 定め て いき ます 。 項目 に つい て は 、 人 箇条 書き に し て いけ ば よい で し ょ う 。 
ここ で 纏め られ た 内 容 は ゲー ム の PR に も 使え ます の で 、 ゲ ー ム の ウリ と な る も の を し っ か り 纏 め ま し ょ 
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ゲー ム 企 画 書 (GDD) を 書い で て みよう 


(た | GDD②ー ゲ ー ム の 世界 観 
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ゲー ム の 世界 観 


スズ ストー リー 

海賊 時 代 。 各 王国 所 属 の 海賊 た ち は 、 
未開 の 地 を 探索 し 、 そ の 地 に 存在 する 
宝 を 奪い あっ て いる 。 


ビジ ュ ア ルス タイ ル グン 
海賊 た ち は 、 全 員 女 性 で 格好 可 7 ンス 


愛 い 系 。 ゲー ム の 戦闘 シー ン 上 ( ン 
CAC 


オー ティ オス タイ ル 
ゲー ム の 曲 (BGM) は 、 海 賊 を イメ ー 
ジ し た ファ ンタ ジー 音楽 に し ます 。 効 
音 (SE) は 、 シ ンプ ル に し ます 。 大 
砲 の 撃つ 音 や 船 の 音 な ど に 限ら れ ま す 。 
各 海賊 キャ ラ に は 、 声 は 付け ませ ん 
(声優 は 起用 し ませ ん ) 。 


図 3-2 初期 段階 の GDD② (世界 観 ) 


ふか ドー サー 

必要 な ら ば 、 物 語 や 時 代 背 景 等 の 設定 に 関す る 簡単 な 説明 を 入れ て お く と よい で し ょ う 。 そ の 際 、 そ の 
設定 が ゲー ム に どの よう な 影響 を 与え る の か を 明確 に し て お きま し ょ う 。 た と えば 、 海 賊 時 代 を ゲー ム の 
基本 設定 と し た 場合 に は 、 ゲ ー ム プレ イ と し て 軍艦 で の 戦闘 と 財宝 略奪 が 含ま れる こと を 説明 する 必要 が 
ある か も し れ ま せん 。 
ビジ ュ ア ルス タイ ル 

この セク ショ ン で は 、 ゲ ー ム の 概観 や 雰囲気 を ビジ ュ ア ル 的 な コン セプト (コン セプト アー ト ) で 説明 
し て いき ます 。 そ の 際 に 制作 され る イラ スト は ゲー ム 内 の 設定 に 応じ て 、 現実 世界 or ファ ンタ ジー 世界 、 
過去 or 未来 、 宇 宙 or 地球 、 も ちろ ん 2D or 3D 等 を 意識 し た も の で ある 必要 が あり ます 。 コ ン セ プ ト 
アー ト は で きる だ け 入 れ た ぼう が よい で し ょ う 。 
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オー ディ オス タイ ル 

とこ とこ で は 、 ゲ ー ム に お ける 音声 が どの よう な も の に な る べき か を まとめ ます 。 ゲ ー ム の 世界 観 や 設定 の 
イメ ー ジ を 膨らませ 、 ど の よう な 曲調 や スタ イル (効果 音 等 もち 含む) が この ゲー ム に と っ て よい の か を 考 
えて いき ます 。 場 合 に よっ て は 、 プ ロ の 音楽 家 や 声優 に 依頼 し た いと いう 案 も 出 て くる で し ょ う 。 初 期 の 
段階 で ば それ ら を リス ト 化 し 、 自 分 た ちの ゲー ム に と っ て ベス ト な 形 で まとめ て 、 最 終 的 に 絞っ て いく と 
いう こと で も 大 丈夫 で す 。 

イン ディ ー ズ の 開発 で は 、 予 算 も 人 手 も 足 りな い の で 、 フ リー の 音素 材 等 を 探し て ゲー ム に 使用 する こ 
と も ひと つの 手 で し ょ う 。 フ リー 素材 で あっ て も 許諾 が 必要 な 場合 も あり ます の で 、 著 作者 に 正式 な 手続 
き を 取 つ っ て 使用 する よう に し て くだ さい 。 


(た | GDD③ー ゲ ー ム キャ ラク ター 


= i] [a] = [| (| に [Es FE I] [= 中 時 [| 放つ =】 [= = ニコ [| Fn =] HE [= Fe FE = | 時 果 語 sz 5 


ゲー ム の キャ ラク ター 


人 素早 い キ ャ ラ 


NN 


図 3-3 初期 段階 の GSDD③ (キャ ラク ター) 
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ゲー ム 企 画 書 (GDD) を 書い で て みよう 


キャ ラク ター (Characters) 

ここ で は 、 ゲ ー ム 内 の キャ ラク ター や 敵 に 関わ る 情報 が 主 と な り ま す 。 た と えば RPG の 場合 で あれ ば 、 
主人 公 も し く は ポス ( 敵 ) の ビジ ュ ア ル や ちょ っ と し た シナ リオ を 記載 し て お く こ と で 、 そ の キャ ラク タ 
ー が ゲー ム の 世界 観 や 設定 の 中 で どの よう な 存在 な の か が 分 か り ま す 。 ま た 、 ジ ャ ン ル に よっ て 差 は あり 
ます が 、 プ レイ ヤー が キャ ラク ター を 通じ て どの よう な 体験 を する の か も 意識 し て 、 ど の よう な キャ ラク 
ター に すべ きか 考え て いく と よい で し ょ う 。 


(2| GDD④-ー イ ンタ ー フ ェ イ スー 


= sei = 本 = el Te Ps PT (= 本] = 本 Ci] | Pe [hard] IE Fs lee [le Fe a [RE Fe i] I Em [ES] [= = = sa = [Ei TY 5 


ゲー ム の マッ プ 


四角 い マ ス を 採用 し ます (9x13) 


地形 タイ プ 


図 3-4 初期 段階 の GDD④ (イン ター フェ イス ) 


レベ ル デ ザ イン 及び 環境 設計 
実際 に プレ イヤ ー が プレ イ す る 舞台 (マッ プ 等 ) は どの よう な も の か 、 ま た その 舞台 に は どの よう な も 
の が 存在 し 、 配 置 さ れ て いる か を 考え 、 実際 に 必要 な コン テン ツ の 量 を 定め る 必要 が あり ます 。 
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レベ ペル デザ イン ] 
ゲー ム 業 界 の 中 に は 、 レ ベル デザ イン と いう 単語 を 「 難 易 度 の 調整 ] と いう 意味 に 誤 
解 し て いる 人 が いま す 。 こ の 「 レ ベル 」 と いう 単語 は 日 本 語 の 「 面 |] と いう ゲー ム 用 語 
に 相当 する 言葉 で す 。 ス テー ジ や マッ プ デ ザ イン に 置き 換え る と 分 か りや すい で す が 、 
誤解 の な いよ うに し た いと ころ で す 。 レ ベル デザ イン の 検討 で は 、 次 の 点 を 意識 する 
必要 が あり ます 。 


・ 各 面 を 遊ぶ こと が 楽し い (プレ イヤ ー が 感情 移入 で きる よう に する ) 
・ 遊び に 自由 を 与え る (選択 に 意味 を 与え る ) 
・ テ ン ポ (流れ ノリ ズム ) が 良い 

・ ゲ ー ム シス テム を 引き 立た せる 

・ ゲ ー ム パラ ンス を 壊さ な い 


この 章 で は GDD の 作成 を 見 て きま し た 。GDD は ゲー ム の 開発 の 各 フ ェ ー ズ に 適し た 形 で 作っ て いく こ 
と が 重要 と 覚え て お きま し ょ う 。 そ の 他 、GDD を 作成 する と き に 注意 すべ き 点 を まとめ て お きま す 。 


・ 見 や すい フォ ント の 使用 

・ レ イア ウト の 統一 (情報 の 整理 の 仕方 等 ) 

・ で きる だ け 短 文 を 使用 し て 、 読 みや すく する 
・ 暖 昧 な 表現 は 避け 、 具 体 的 な 表現 に する 

・ 複 雑 な も の は 見 や すく する 工夫 を する 

・ イ ラス ト (挿絵 ) を で きる 限り 入れ る 


最後 に 補 走 し て お きた いこ と が あり ます 。 読 者 の 皆さん は この 草 を 読ん で GDD の アウ トラ イン が ある 
程度 イメ ー ジ で きた か も し れ ま せん 。 し か し 、 す べ て の ゲー ムジ ャ ン ル や 条件 を 満た す よ うな 定型 的 な 
GDD ア ウト ライ ン は 存在 し な いと いう こと も 上 覚え て お きま し ょ う 。 

た と えば 、 ドラ ゴン クエ スト 、 マリ オブ ラ ザ ー ズ 、 コー ルオ プ ブ デュ ー テ ィ の よう な ゲー ム を 考え た 場合 、 
それ ぞ れ が 異な る GDD を 有 し て いま す 。 さ ら に 、 仮 に それ ら の ゲー ム の GDD を 読者 の 皆さん が 考え た 場 
合 も 原作 の GDD と は 異な る は ず で す 。 

仮に 今 、 ド ラゴン クエ スト の GDD が 目 の 前 に あっ た と し て も 、 自 分 の ゲー ム プ ロジ ェクト に と っ て は 、 
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ゲー ム 企 画 書 (GDD) を 書い で て みよう 


意味 の な い セ クシ ョ ン も 多く 含ま れ て いる は ず で す (も ちろ ん 、 参 考 と な る 部 分 や 必要 な セク ショ ン が 潜 
ん で いる こと も ある で し ょ う )。 大 切な の は 、 オ ー ル マイ ティ で 定型 的 な GDD と いう も の は な く 、 そ れ ぞ 
れ の プロ ジェ クト ご と 、 ま た チー ム に よっ て も GDD 作 成 方 法 は 異な っ て いて よい と いう こと で す 。 
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ヒー ゴー 
/ 本章 で 勉強 する こと 
@ Web ペ ー ジ は HTML/CSS/JavaScript @ enchant.js は ゲー ム の た め の 便 利 な 機能 
の 3 つ で 作る こと が で きる 満載 の フレ ー ム ワー ク 


@ ブラウザ 上 の プロ グラ ム は JavaScript @ 本 書 で は ブラ ウザ は Google Chrome を 
で 書く こと が で きる 用 いる こと と し 、 テ キス ト エ ディ タ は Sub 


@ ブラ ウザ に は JavaScript の バグ を 発見 lime text を 紹介 し ます 

する デバ ッ ガ な ど が つい て いて 便利 で す e 使い 慣れ た エディ タ が あれ ば 、 そ ちら を 使 
e ブラ ウザ ご と の 違い を 吸収 する た め に 「 フ っ て 進め よう 

レー ム ワ ー ク 」 を 利用 し ます 


前 草 で 決ま っ た よう に 、 こ れ か ら 皆 さん と ブラ ウザ で プレ イ す る 2D の シミ ュ レ ーション ゲー ム を 作っ 
て いき ます 。 そ こ で 、 プ ログ ラミ ング を 始め る 前 に ブラ ウザ と それ に 関す る 技術 の 知識 を つけ まし ょ う 。 
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ゲー ム の 開発 環境 


の Web ペ ー ジ の 表示 の 仕組 み 


トド トト トト | | に に ーー | トート ーー に ーー ニニ に ニニ に ニニ ニニ に ミミ 


ブラ ウザ は Web ベ ペー ジ な ど を 表示 で きる アプ リケーション ソフ トウ ェ ア で す 。 お も に HTTP (Hyper 
Text Transfer Protocol) と いう プロ トコ ル (通信 の 手順 等 を 定め た 規約 ) で イン ター ネッ ト か ら ソ ー 
ス を 読み 込み 、 表 示さ せま す 。 単純 に ペー ジ を 表示 する だ け で な く 、 い ろ い ろ な ブ プログ ラム の 画面 を 表示 
させ て 検索 や ショ ッ ピ ング 、Facebook な どの SNS (Social Networking Service) そし て ゲー ム な ど 
も で きま す 。 

Web ペ ー ジ を 定義 むせ する お も な 技術 は 3 つ あ り ま す 。 そ れ は HTML、JavaScript、CSS で す 。 


Web ベ ペー ジ 


図 4-1 Web ペ ー ジ を 構成 する た め の 技 術 


と の 3 の 技術 は それ ぞ れ 違 う 目 的 を 持っ て 使わ れ て いま す 。 
HTML 


HTML (Hyper Text Markup Language) の 役割 は Web ベ ー ジ の 内 容 (文章 な ど ) を 定義 むす る こと 
と その 配置 で す 。HTML の 最新 版 は バー ジョ ン 5 (HTML5) と な っ て いま す 。 前 と 後ろ に 不 等 号 を 使っ 
た <html> な どの タグ を 使っ て 内 容 を 意味 付け し ます 。 


Web ペ ー ジ 


く !DOCTYPE htm1 ユ > 
<html> 
<head>< / heaqd> 
<body> 


く p> 内 容 く /p> 


</body> 
| </html> 


図 4-2 HTML 
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HTML5 は いま まで の HTML よ り も る 高度 な 表現 が 可能 と な り 、 ゲ ー ム な ど を 作る の に も 便利 に な り ま し 
た 。Canvas と いう 画像 や 映像 を 高速 に 扱う 新しい 仕組 み が 追 加 さ れ て お り 、 ゲ ー ム の 画面 を 作る の に と 
て も 便利 に な っ て いま す 。 


CSS 


CSS (Cascading Style Sheet) の 役割 は Web ペ ー ジ の デザ イン (見 栄え ) を 定義 むす る こと で す 。 た 
と えば Web ベ ペー ジ の タイ トル の 文字 の 色 や テキ スト の フォ ー マ ッ ト 、 色 や 背景 な ど は CSS で 定義 を し ま 
す 。 


body { 
background-color: #d0e4fe : 


font-size: 20px; 


図 4-3 CSS 


今回 作る ゲー ム で は 私 達 が 直接 CSS を 利用 する こと は あり ませ ん 。CSS に つい て 詳し く 知 り た い 場 合 
は 、CSS を 解説 し た 入門 書 や Web サ イト も ある の で 、 そ ちら を 参考 に し て くだ さい 。 
JavaScript 


JavaScript の 役割 は Web ペ ー ジ の 挙動 で す 。 

JavaScript は プロ グラ ミン グ 言 語 の ひと つ で す 。 プ ログ ラミ ング 言語 と いう と 、 ほ か に CC 言語 、 
C+ 十 、Java、Ruby な ど た く さん あり ます が 、 ブ ラウ ザ の 内 部 で プロ グラ ム を 動か そう と する 場合 は 多 
く の ブ ラウ ザ で 採用 され て いる JavaScript を 使う こと に な り ま す 。 


マ JavaScript の 例 


<script type='"text/javascript"> 


<『ーー 
myTb1 — new Array(" 日 " "月 9/" 火 " 水 " " 木 "/" 金 "" 土 "): 
myD = new Date(); 
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myYear = myD.getFullYear(); 
myMonth = myD.getMonth() + 1: 
myDate = myD.getDate(); 
myDay = myD.getDay(); 
myHours = myD.getHours(); 


myMinutes = myD.getMinutes(); 
mySeconds = myD.getSeconds(); 


myMessl = myYear + "年 " + myMonth + "月 " + myDate + "日 "; 
myMess2 = myTb1[myDay] + "曜日 ": 

myMess3 = myHours + "時 " + myMinutes + "分 " + mySeconds + " 秒 "。 
myMess = myMessl + " " + myMess2 + " " + myMess3; 


document.write( myMess ); 
リン 


</script> 
(http://www.red.oit-net.jp/tatsuya/java/getdate.htm よ り 引 用 ) 


本 書 で 開発 する ゲー ム も その ほとん ど は JavaScript で 書く こと に な り ま す (JavaScript に つい て は 
次 章 で 基本 的 な 部 分 を 説明 し ます )。 


どの ブラ ウザ で も この 3 つの 技術 は ほとん ど 同 じ よ うに 使え ます が 、 細 か い 部 分 で は 例外 も あり ます 。 
と くに JavaScript と CSS に 関し て は ブラ ウザ の 影響 を 受け る こと が 多く 、 パ フォ ー マ ン ス や 仕様 に 微妙 
な 違い が 見 られ ます 。 


SR 
| ay ee NN いい ーー 
( が | 技術 面 で の ブラ ウザ ゲー ム の メリ ッ ト ン ノン デメリット 
に ニキ ーーー トニ ーー トニ ーー トー ニー「 ニ ニニ | ニー トニ ニニ トニ ニー トーー ン ーー ニー ニニ ュ ーー ニー ニー トーニー オー ニニ 「 ーー ニー トーー ニ ーー ニニ ーーー: ニー ニ に ーー ニ 「 ーーー トー ニキ ーー ニ ト ニ ニニ キー ニニ ーー ニー ニー ニー トニ ーー ニー ニニ トニ ーー ーー ニャ ーー トー ニー ニー ニュ ーーー ニー キー 
どの 技術 に も メリ ッ ト と デメ リッ ト が ある も の で す 。 デ メリ ッ ト の な い 万 能 の 技術 と いう の は まず あり 
えな いで し ょ う 。 し か し 、 自 分 の 環境 の メリ ッ ト と デメ リッ ト を 知れ ば 、 状 況 が コン トロ ー ル し や すく 、 
前 に 進む た め に 必要 な こと も 見 えて きま す 。 
まず 、 ブ ラウ ザ で ゲー ム 開 発する と き の メ リッ ト と デメ リッ ト を まとめ て み ま し た 。 


メリ ッ ト : 

・ 開 発 環境 を 無料 で 整備 し や すい 

・ ブ ラウ ザ ゲ ー ム な ら ど の OS や スマ ホ で も ある 程度 遊べ る 
・ そ の た め 、 プ レイ ヤー の リー チ は 広い 

・ ブ ラウ ザ の 技術 は ゲー ム 以 外 に も 応用 で きる 

・ ブ ラウ ザ の 技術 は 基本 的 に すべ て オー プン で 自由 に 使え る 
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デメ リッ ト : 

・ ネ イ テ ィ ブ の ゲー ム (OS 上 で 直接 動作 する ゲー ム ) より 実行 速度 が 遅い 

・ ブ プラ ウザ の 種類 が 多く 、 仕 様 の 違い も 思っ た 以上 に 多い 

・JavaScript は 非常 に 自由 な (厳密 で は な い ) 言語 な の で 比較 的 バグ や ミス が 起き や すい 


以降 で は こう し た デメ リッ ト に どう 対応 し て いく か 考え て み ま し ょ う 。 


(た | ブラ ウザ ゲー ム の デメ リッ ト 対策 


Ns ea UE EE EE UE EE [= Ea (EE = | EE | EE I = EE (= FE i EE (EE EE EE [EE = = トー トー ニー トー トー トー トー 


実行 速度 


ブラ ウザ 上 で 動く ゲー ム の 場合 、OS の 上 で 直接 動作 する ネイ ティ ブ ア プ リケーション の ゲー ム よ り 実 
行 速度 は 遅く な り ま す 。 し か し 、3D や 物理 演算 に 頼る ゲー ム で は 実行 速度 は 致命 的 な 問題 と な り ま す が 、 
これ か ら 作 る よう な 動き の 激しく な い 2D の ゲー ム な ら 有 影響 は そこ まで 大 きく は な いで し ょ よう 。 


ブラ ウザ な ど へ の 依存 

実際 に プラ ウザ は た くさ ん 存在 し て お り 、 環 境 依存 も 思っ た より あり ます 。 こ れ は ブラ ウザ で ゲー ム を 
ゼロ か ら 作 る と き の 一 番 の 壁 で す 。 今 な ら 主 要 な も の だ け で も こん な に た くさ ん の ブラ ウザ に 対応 し な け 
れ ば な り ま せん 。 


Internet Firefox 
Explorer 


図 4-4 いろ いろ な ブラ ウザ に 対応 し な けれ ば な ら な い 


各 ブ ラウ ザ ご と に 別々 の プロ グラ ム を 書い て いて は 大 変 で すか ら 、 違 い を 吸収 し て くれ る 何 か が 必要 で 
す 。 そ れ は フレ ー ム ワー ク ま た は SDK (Software Development Kit) と 呼ば れ て いま す 。 

イメ ー ジ と し て は 、 各 ブラ ウザ の 開発 の 基盤 は 凸凹 に な つて いる 感じ で す 。 フ レー ム ワ ー ク は ブロ グラ 
ム と ブラ ウザ の あい だ で 動作 し ます 。 フ レー ム ワ ー ク を 使っ て プロ グラ ム を 書く 場合 、 基 本 的 に 命令 は フ 
レー ム ワ ー ク に 対し て 出し ます 。 す る と フレ ー ム ワー ク は 各 ブ ラウ ザ に 合っ た 命令 を 必要 に 応じ で 発行 し 
て くれ る の で す 。 


トメ スル ミ メ メル K ム メル トミ メル トメ スル トミ メス ルミ メ メル ミ メ メル ミ メ メル トミ メル トミ メル トメ メル メ メル メ スルメ メル メ スルメ メス ルミ メル K メル K コス ルミ 1) 


ゲー ム の 開発 環境 


複数 の ブラ ウザ / プラ ッ ト フ ォ ー ム 
に 


図 4.5 フレ ー ム ワー ク の 役割 


今回 は ゲー ム を 作る の で 、 ゲ ー ム に 特 化し た ブラ ウザ の フレ ー ム ワー ク で 環境 の 違い を 吸収 し ます 。 今 
回 利用 する の は enchant.js と いう フレ ー ム ワー ク で す 。enchant.js に は ゲー ム を 作る た め に 便利 な 機 
能 が た くさ ん 用 意 さ れ て いま す 。 


バク や ミス が 起き や すい 


これ も 大 き な 問 題 で す が 、JavaScript に 限ら ちら ず どの プロ グラ ム 言 語 で も バグ や ミス は 付き 物 で す 。 
JavaSoript の 場合 、 ほ か の 言語 に 比べ て 記述 が あい まい に な り が ち で ある 精密 な 数 字 の 演算 に 向 か な い 
な どの 問題 点 も あり ます が 、 セ キュ リティ は し つか り し て いる と 筆者 は 考え て いま す 。 プ ログ ラム の 影響 
範囲 も お も に ブラ ウザ に 限定 され て いる の で 、C 二 二 、C# や Java に 比べ 、OS の デー タ を 破壊 し て し ま 
う よ う な バグ は 作れ ませ ん 。 ま た 、 バ グ の 修正 に つい て も 、 昔 は 目 と 手 で プロ グラ ム を 確か め て いま し た 
が 、 最 近 の ブラ ウザ に は デバ ッ ガ (バグ 発見 の 手助け を し て くれ る ツー ル ) な ども 用 意 さ れ て いま す の で 、 
ほか の 言語 と の 差 は そこ て まで な いか も し れ ま せん 。 


し 
l ぷ ニー 一 や 
(た | プロ グラ ム を 始め る た め の 準備 
= 時) i tp EE EE 3 EE = EE EE = EE: ££ EE EE i 1 Ep EE EE EE EE EE i 
今回 は Google の Chrome ブ ラウ ザ で 開発 を 行い ます 。Chrome は どの OS の バー ジョ ン で も ちゃ ん と し 
た 開発 ツー ル に な り ま す 。Internet Explorer や Safari に も 優秀 な 開発 ツー ル は あり ます が 、Macintosh 
や Windows で の 操作 は 異な る の で 統一 され て いる も の を 採用 し まし た 。 


LTX スルメ スルメ メル K メル K メル K ミ メル メ メス ルミ メル メ メル ミ メ メル トミ スルメ メル KK メス ルミ メル K メル トメ メル ミ メ スルメ メル K メ スル X ルミ ミ 1) 
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Google Chrome - ブラ ウザ 


Google chrome 


図 4-6 Google Chrome 


Chrome の 強み は 、HTML や CSS と いっ た Web の 新しい 技術 や 規格 が 積極 的 に 取り 入れ られ て いる ご 
と で す 。 そ の た め Web ペ ー ジ や サー ビス の 開発 側 か ら 見 る と 、Chrome は 対応 し や すい ブラ ウザ で す 。 
も し 、Chrome を 自分 の 環境 に イン スト ー ル し て いな い 場 合 は 、 ネ ッ ト か ら ダ ウン ロー ド し て 、 イ ンス 
トー ル し て お いて くだ さい 。 
Google Chrome の Web サ イト 


http:/www.google.co.jp/chrome 


SublimeText - テキ スト エディ タ 


ゲー ム や プロ グラ ム 全 般 を 書く た め に テキ スト エディ タ と いう ツー ル が 必要 で す 。 テ キス ト エ ディ タ は 
Word な どの よう な 文書 を 作成 する た め の ア プリ ケー ショ ン で す が 、 文 章 の 見 た 目 を 変更 し た りす る 機能 
は な く (基本 的 に 文字 サイ ズ や フォ ント に 変化 を つけ た りす る 機能 は あり ませ ん )、 文 書 入力 に 特 化 し た 
軽快 さと プロ グラ ミン グ に も 便利 な 機能 を 備え て いま す 。 プ ログ ラミ ング に は 高 機能 な 統合 開発 環境 を 用 
いる こと も あり ます が 、JavaScript の 場合 は テキ スト エディ タ で 書く こと が 多い で し ょ う 。 

どの OS に も 基本 的 に 何 か の テキ スト エディ タ が 付属 し て いま す が 、 プ ログ ラミ ング に は 不便 な こと も 
多い の で 、 使 いや すい テキ スト エディ タ を 準備 し て お く 必 要 が あり ます 。 

も し 自分 が 使い 慣れ て いる テキ スト エディ タ が あれ ば 、 ぜ ひそ ちら を 利用 し まし ょ う 。「 テ キス ト エ ディ 
タ な ん て 使っ た こと な いよ 」 と いう 場合 は 、Macintosh で も Windows や Linux で も 使え る Sublime Text 
エディ タ を お 勧め し て お きま す 。 この エディ タ は 有料 で は あり ます が 、 評 価 目 的 で 利用 する こと も 可能 で す 。 

Sublime Text の イン スト ー ル は 簡単 で す 。 次 の サイ ト か ら 最 新 の Sublime Text を ダウ ン ロ ー ド し ま 
し よう 。 

Sublime Text の Web サ イト 


http:/www.sublimetext.com 


(スルメ メル メ メル ミ メル トミ スルメ スルメ ミコ ルミ スルメ メス ルミ メメ メル ミ メト ルミ メル メ コル トメ メル K メ スル ミ メル メメ スル ミ スル K メ ミル ミ メル メメ 肖 は) 


ゲー ム の 開発 環境 


| @ OO / maexhm x Xi Index.html x ア 咽 'Sublime Text: The text ec x K ーー yt @ O 0 / [Imdex.html x 4 [index.hml x Yy 目 Subtime Text - Download x N = 


を で | [3 www.sublimetextcom E> Cn www.sublimetext.com/2 


Forum Download Forum 


Sublime Text Sublime Text 2 


Sublime Text is a sophisticated text editor for code, markup and prose. 
You'll love the slick user interface, extraordinary features and armazing Derforrmance. 


Download 


The current version of Sublime Text 2 is 2.0.2. 


Suhlime Text 3 is currently in beta, and contains many improvements over Sublime 


Sublime Text 2 may be downloaded and evaluated for free, however a license must be 
purchased forcontinued use. There is currently no enforced time limit for the evaluation. 


ャ 5E H 


Please submit feature requests to http:/subimetext.userecho.com/. For notification 


図 4-7 Sublime Text の サイ ト (http://www.sublimetext.com/) 図 4-8 ダリ ウン ロー ド ペ ー ジ 


タダ ウン ロー ド が 終っ た ら 、 ダ ウン ロー ド し た ファ イル を 各 OS で ダブ ルク リッ ク し て イン スト ー ラ を 立 
ち 上 げ て くだ さい 。 環 境 に よっ て 多少 の 違い が ある か も し れ ま せん が 、 基 本 的 に は イン スト ー ル ウィ ザー 
ド を クリ ッ ク し て 進め て いく だ け で す 。 起動 す る と 次 の よう な 画面 が 現れ ます 。 


Le 
= enchant.-s 坊 使 コ 前 こ 史 琶 倒 邊 理 、 
を 
enchant{); 
window、ontoad = function(){ 
var game = new Core(96@」 649) : 
game、fps = 38; // ps な に 仁 可 を 応 直 更新 する 
< 必要 な ファ ブル を 得 放 パス で き 誰 こ 折 定 す る 。 コ ァ イル は すべて 、 ゲ ー ム が 始ま る 向 こ エコ ー で され そ 。 
キア 
var napFrame = ツェ プア TeSOUTCCS/m8pframe・PnGTj 
anme.preload{ mapF rame) ; 
ar na 88 = "プア FeSCUTCeS/wap98.pnd"i 
9ame 。Dretoad(mapBack9round@9 ) : 
var mapTiles = "../../resources/maptiles.png™; 
game.preload{ mapTiies); 
var mal {resources/mapui. png" ; 


var shipsSpriteSheet 
game.preload{ shipsSpr 


= ef.../{resources/ships. png™; 
iteSheet ) : 


FF TT 


, NN pp 


var pirateSprites = [ 
"fe. {Tesources/pirate98.png”, 


・ png 
9 
png”, 
F te93.png”, 
esources/pirate92.png 
fei reSoUrces/plirate95.png”, 
J; 
for (var i=8; 1 < pirateSprites.length; ++i) て 
game.preload{pirateSpritesi11); 
39 } 


図 4-9 Sublime Text 


イン ター ネッ ト で は ご Sublime Text の メニ コー 人 に 0 本当 人 請 
を 日 本 語 化 する 方 法 も いく つか 紹介 され て いま 還 ヨ 暫 りら みき E 居 / 
す 。 バ パー ジョ ン に よっ て 方 法 は 異な り ま す が 、J4SEAZ と 衣 ド 
メニ ュー を 日 本 語 化す る プラ グイ ン が 提供 され 
て いま す 。 |sublime text 日 本 語 ] な どの キー 
ワー ド で 検索 し て みて も よい で し ょ う 。 


これ で ブロ グラ ミン グ の 準備 が 整い まし た 。 さ っ そく 書き は じ め た いと ころ で す が 、 ま すず 次 章 で は 
JavaScript の 基本 的 な 文法 を お さえ て お く こ と に し ます 。 
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JavaScript に ちょ っ と 人 癌 


本 草 で 勉強 する こと 

@ ゲー ム 作 り に 欠か せな い プ ログ ラミ ング 言 
語 に つい て 勉強 し よう 

@ JavaScribt は Web ア プリ ケー ショ ン で 
は 最も 普及 し た 言語 で す 

@ ブラ ウザ で JavaScript を 実行 する 方 法 
を 学 ぼ ぽう 


@ 変数 、 関 数 、 配 列 な が ど プ ログ ラム の 基本 と 
な る 要素 を 解説 し ます 
@ プ ログラム に お ける オブ ジェ クト に つい て 
も 簡単 に 理解 し て お きま し ょ う 
RN CG ラバ の 2 人 放 
う 


JavaScript に ちょ っ と 入門 


(Z| JavaScript と は 


‘c= = i EE NE! EE ££ EE EE EE EE EE EB ££ ME pS EE ーー コー ニキ ーー ーー 


本 書 で 使う JavaScript は Web ペ ー ジ の 挙動 を 制御 する た め に 開発 され た プロ グラ ミン グ 言 語 で す 。 そ 
の た め 、JavaScript は Web ペ ー ジ 内 に 書い て 動作 させ る こと が で き 、HTML や CSS を プロ グラ ム に よっ 
て 操作 で きる よう に な っ て いま す 。 

JavaScript は 1995 年 、Netscape Navigator と いう ブラ ウザ の た め に ブレ ンダ ン ・ ア イク 氏 に よっ 
て ほとん ど 1 ヶ月 くら いで 開発 され まし た 。 そ の 当時 は 、 こ こま で 普及 する と は 思っ て いな か っ た で し ょ 
う が 、 現 在 は Web 技 術 の 世界 で は 最も 一 般 的 な 言語 と な っ て お り 、 さ まさ ざま な 使わ れ 方 を し て いま す 。 

Netscape 社 の ブラ ウザ 開発 は すでに 終了 し て お り 、 製 品 と し て は 存在 し て いま せん 。 し か し 、 
Firefox ブ ラウ ザ は Netscape Navigator を 引き 継い だ フリ ー の ソフ トウ ェ ア で あり 、Netscape 
Navigator の 孫 の よ うな 存在 と も いえ る で し よう 。 


(Z| Java と JavaScript の 関係 性 


に トート | トー に | トー オー トー に ニー トニ ニー ニー 


コン ピュ ー タ 技術 の 世界 に は Java と いう 普及 し た 言語 が あり 、JavaScript と 何 か 関 係 が あり そう に 
思え ます が 、 ま っ た く 別 物 で す 。 基 本 的 に JavaScript と Java は 「 風 車 」 と 「 牛 」 と 同じ 関係 性 を 持っ 
て いま す 。 つ まり 名 前 が 多少 か が ぶっ て いる と いう だ け で 、 ほ か に あま り 関 係 性 は あり ませ ん 。 


Java <> JavaScript 


の し <> ふつう し や 


図 5-1 Java と JavaScript 


両者 は プロ グラ ミン グ に 使わ れる 言語 で す が 、 プ ログ ラム 言語 の 世界 で は 名 前 と 技術 的 な 中 身 が 一 致し 
て いな いこ と も よく あり ます 。 た と えば 、JavaScript よ り C# の ほう が Java に 近い 言語 で す 。 し か し 、 
C# は CC 言語 や C 十 十 と は だ いぶ 異な っ て いま す 。 プ ログ ラミ ング 言語 の 世界 で は 、 名 前 か ら そ の 言語 の 性 
質 を 単純 に 判断 し な いよ うに 心がけ まし ょ う 。 
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(2| 初め て の JavaScript [Hello World」 


ドー ト トー に トー に に トー トト トト ニー トー に ーー 


プロ グラ マー の 世界 で 最初 に 何 か が 新しい 言語 や フレ ー ム ワー ク を 使う と き に 、 一 番 最初 に や っ て みる の 
は 「Hello World] と いう 文字 を 出力 する こと で す 。 べ つ に ほか の こと を 試し て みて も よい の で す が 、 あ 
る 種 の 伝統 に も な つっ てい ます ので 、 今 回 も それ を 守っ て 「Hello World」 を 出し て み ま し ょ う 。 

JavaScript は Chrome ブ ラウ ザ の デバ ッ グ ツー ル か ら 試 すこ と が で きま す 。Macintosh の 場合 は 
[Command] 土 [Option] 十 [il] で Chrome の デバ ッ グ ツー ル を 開け ます 。Windows の 場合 は [f12] ま た は 
[Ctrl] 士 [Shift] 十 [を 押し て くだ さい 。 デ バッ グ ツ ー ル が 立ち 上 が っ た ら 、 一 番 右 の コン ソー ル の タブ を 
開い て くだ さい 。 


OO / maeuhm 


Apps For quick access, place your bookmarks here on the bookmarks bar. Import bookmarks now. 


この 一 番 下 の と ころ に JavaScript 


を 入力 で きま す 。 こ の 部 分 は コマ ン 
( ) S Cc ドラ イン 、 ま た は コマ ンド プロ ンプ 


Japan ト と 呼ば れ て いま す 。 


a [ Elements Network Sources Timeline Profiles Resources Audits |Gonsolel 
BQ WW <top frame> 


最初 の [Hello World」 は ブラ ウザ の ポッ プア ッ プ で 出し て みる こと に し まし ょ う 。 コンソ ー ル の コマ 
ンド ライ ン に 次 の 一 文 を 書い て [enter] キー を 押し て くだ さい 。 


alert( "He11o World! ) 


[enter] キー を 押す と 、 次 の よう な ポップアップ が 出る は ず で す 。 


(は MX スルメ スルメ メル メ メル トメ スルメ メル ミ メ スルメ メル ミ メル トミ メメ ルミ メル トメ メメ ルミ メル ミ メル ミ メル ミ メ スルメ メル ミ メ スル メ メル K メル ミ 1) 


JavaScript に ちょ っ と 入門 


O O O Imdex.html 


=:: Apps For quick access, place your bookmarks here on the ookmarks bar. Import bookmarks now 


The page at ht&tPs://www.google.coujP 
says: 
Hello World! 


a Elements Network Sources Timeline Proflles Resources Audits censete{ 
&@ YW <topframe> 


> aLert("Hetto World!"); 
> 


次 は 「Hello World] を コン ソー ル 自 体 に 出力 し て みた いと 思い ます 。 実際 の 開発 で は テス ト や 確認 の 
目的 で 、 デ ー タ を コン ソー ル に 出力 する こと が 多く あり ます 。 


console.log( "He11o World!' ): 


OO / maeummi 


::: AppS For quick access, place your bookmarks here on the ookmarks bar. Import bookmarks now._. 


Japan 


(GO. gle 


Qa Elements Network Sources Timeline Profiles Resources Audits ensnte{ 
QO 補 rtopframes 
> console.logt("Hello World 1" }; 
Hello World! 
< undefined 
> 


(メル K メ メス ルミ スル ミ メス ルミ メル メ メル ミ メス ルミ メ メル ミ メル トメ メル ミ メル トミ メル メ メル メ メル メ メス ルル k メ メル K メ メル ミ メル K メ メル ミ コス ルミ メル ミ え 【) 39 
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に 
| 
(た | く script> タ グ 
人 
コマ ンド ライ ン か ら JavaScript の コー ド を 入力 し た 場合 、 実 行 さ れる た びに コー ド が 消え て し まう の 
で と て も 不便 で す 。 ま た 、 コ ー ド を 配布 する こと も で きま せん の で 、 今度 は ファ イル に JavaScript を 保 
存 し て み ま し ょ う 。 一 番 簡 単 な や り 方 は HTML の 中 に JavaScript を 書く こと で す 。 そ の た め に は HTML 
の < ぐ script> タ グ を 使い ます 。 


<html> 
<head> 
<script> 
alert( Hello World" 有朋 
</script> 
</head> 


略 


この コー ド を 例え ば hello.html と いう 名 前 (後ろ が .html と な っ て いれ ば 名 前 は 何で も 大 丈夫 で す ) で 
保存 し て 、 ブ プラ ウザ に ドラ ッ グ & ド ロッ プ す る と 次 の よう に な り ま す 。 


Javascript の アラ ー ト 
Helln World 


この よう に JavaScript は HTML の 中 で は <script> タ グ か ら </script> の あい だ に 書く の が 基本 で 
す 。 で も 、 ゲ ー ム の よう に プロ グラ ム が 長く な る 場合 や 作っ た プロ グラ ム を ほか の 人 と 共有 し た いと きも 
ある か も し れ ま せん 。 そ の 場合 は 、HTML に 埋め 込む の で は な く 、 別 の ファ イル に 書い た JavaSoript を 
HTML の 中 に 読み 込む よう に し ます 。 た と えば 、 次 の よう な 内 容 の myScriptjJs と いう ファ イル が あっ た 
と し ます 。 


alert( he11o wor1d Mie 


ススメ スル メ メル k ム メル トミ メル トメ スル トミ メル ミ メ メル ミ メ メル ミ メル トミ メル ミ メル トメ メル メ メル メメ スルメ メル メ ム メル ルミ メス ルミ スル K メル K メス ルミ 1) 


JavaScript に ちょ っ と 入門 


この 場合 は 、HTML フ ァイル の <nsaa> タ グ か ら </heaa> タ グ の あい だ で 次 の よう に 読み 込み ます 。 


<html> 
<head> 

<script, src="myScript.js"></script> 
</head> 


作っ た HTML フ ァイル と myScript.js と を 同じ と ころ に 置き 、 実 行 し て みる と さき ほど と 同じ 結果 が 得 
られ ます 。 こ の 本 で 扱う enchant.js も 1 つの 大 き な フ ァイル に まとまっ て いま す の で 、enchant.js を 使 
う 場 合 に は 上 の 方 法 で ファ イル を 読み 込む 必要 が あり ます 。 

本 書 は JavaScript の 入門 書 で は な い の で 、 あ まり 詳し い 文 法 を 説明 する こと は で きま せん が 、 以降 で 
は ゲー ム の 開発 に 関係 あり そう な JavaScript の 機能 や 文法 を 説明 し て いき ます 。 


1 
( | console.Iog 


a = 5 Ea ] | ET | = CE a | El EE IE 本 = = | = | | | a 1== = = = 本] = 相本 


先 の Hello World で も 使っ て いた の で す が 、 ベ ペー ジ 上 に は 現れ な い 出 力 を デバ ッ ガ の コン ソー ル に 出す 
こと が で きま す 。 プ ログ ラム が ちゃ ん と 動い て いる か 、 自 分 の 思っ た と お り の デー タ に な っ て いる か は ご 
の 方 法 で 調べ た ほう が 便利 で す 。 これ に は econso1se . 1og と いう 命令 文 を 使用 し ます 。 


文字 


console.log( "He11o World  ); 


数 字 
console.log(7); 配列 (配列 に つい て は の ちほ ど 説 明 し ます ) 


sotisole.lcog( [ 1, 2,3, 4, 5, 1 )。: 
console.log( 1 hp: 100, mp: 50 } ); 
オブ ジェ クト (オブ ジェ クト に つい て も の ちほ ど 説 明 し ます ) 


ee を ee を ee メル メ メル K ユメ ルミ メル K メル トミ メス ルミ メル ミ メル K メル トメ メル ミ ム スルメ メル K ム メル ミ メ メル ミ メル ミ メ メル ミ ルミ メル ミ 1) 
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* Elements Network Sources Timeline Proflles Resources Audits Gensatei 
⑤① VY <topframe> v UPreserve log 
ぅ console.logt"Hello Wortd"); 

Til; 


console. logt7} 
console.logt [ 


1。 2, 3, 4, 5, J ): 
consote.tog( { hp: 198, mp: 59 } ); 
Hello World 
7 


は 。 2。 3。 4, 5] 

Object {hp: 198, mp: 58 ナ 
て - undefined 
> 


conso1e . 1og は 、 カン マ で 複数 を 同時 に 出力 する こと も 可能 で す 。 


console.1od( "He11o Wor1d と が | 1L。 2, 3;4, 5。 1, { hps 100; mp: 59 +? 


BR 
W 上 
( | 変数 (var, variable) 
ドー トー ーー トー Cl ーー 
変数 は 名 前 の 付い て いる 箱 の よう な も の で す 、 中 に 計算 結果 や プレ イヤ ー か ら の 入力 な ど 、 値 が 変化 す 
る も の を 入れ て 扱う こと が で きま す 。 


- 右 の 単語 は 変数 名 で す 。 変 数 に 右 の デー 
var hoge = He11o World : タ (Hello World) を 入れ て いま す 
console.1od( hoge ); 


コン ソー ル に 変数 hogs の 中 味 を 表示 させ 
ます 。 console.log( "He11o World’ 
) : と 同じ 意味 に な り ま す 


図 5-2 変数 の 概念 
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JavaScript に ちょ っ と 入門 


ここ で は |=」 (イコ ー ル ) を 使っ て いま す が こ れ は 、 数 学 に お ける 「 等 し い ] と いう 意味 と は 異な り 
ます 。JavaScript の = は (多く の ほか の プロ グラ ミン グ 言 語 も そう で す が )、「 変 数 等 に 値 を 入れ る ( 代 
人 入 す る )| と いう 意味 に な り ま す 。 

た と えば 変数 hoge に 3 を 加え る 場合 は 、hoge = hoge + 3 と 書き ます 。 足し算 の 結果 、 変 数 nogs の 
値 は 3 増え る こと に な り ま す 。 こ うい 2 う 変数 等 の 値 を 操作 する 記号 を 代入 演算 子 と 呼び ます 。 

ちな み に こ ご の 記述 は 、「+=] と いう 別 の 代入 演算 子 を 使っ て hoge += 3 と 書く こと も で きま す 。 変 数 
に 足し 算 を する 処理 は よく ある の で 、 こ の ほう が 簡潔 で す 。 


マ 表 5-1 代入 演算 子 (一 部 ) 


記号 意味 使用 例 
+= 足し て 代入 a+=b(a=a+b と 同じ ) 
ーー 引い て 代入 a -=b(a =a- b と 同じ ) 
= 掛け て 代入 a*=b(a= a ppE 同 B) 
/= 割っ て 代入 a /=b(a=a/b と 同じ ) 
%= 割っ た 余り を 代入 as=bp(a= ュ as*pb と 同じ ) 


また 、 数 字 を 1 だ け 増 や し た いと き は 、hoge++ や ++hoge と いう 書き 方 も 可能 で す 。 ど ちら も hoge の 
値 を 1 つ 増 や し ます 。 逆 に 1 つ 減 らし た い 場 合 は 、hoge-- や --hoge と 書い て くだ さい 。 ど ちら の 書き 方 
も 単独 で 使う と き は 同じ 意味 に な り ま す が 、 書 き 方 に よっ て は 動作 が 異な る 場合 も あり ます 。 

た と えば 、 hoge = 5 の と き 、fuga = hoge++ と する と 変数 hogs の 値 は 6G で Euga の 値 は 5 に な り ま す 。 
この 場合 は hogs の 値 を Euga に 代入 し て か ら noge の 値 を 1 つ 増 や し て いま す 。 一 方 、Euga = ++hoge と 
描い た 場合 は 先 に hogs の 値 を 増やし ます 。 で す の で 、 こ の 場合 は hoge も Euga も 6 に な り ま す 。 微妙 な 違 
いで す が 簡 単に 頭 に 入れ て お いて くだ さい 。 


| 関数 (function) 


= ニニ ーー コー ニー トーー ド トー リリ ニニ ト ーー | トー ニート ーー リト ーー トーー ト ーー| ーー トー リート ーーーー| ニ ーー トーー ト ーー トーー ロ ーー リー ニート ビー トー ドー リー ニート ーー ーー トー コー に ーーー | に 


長い プロ グラ ム を 書い て いる と 同じ よう な 処理 を 何 回 も 繰り 返す て と が あり ます 。 そ うい うと き は 処理 
を 関数 に し て お く と 簡単 に 呼び 出す こと が で きま す 。 今 まで 使っ て いた conso1e . 1og や a1er も も 
JavaScript の 関数 で す 。 

関数 に は 入力 と 出力 が か あり ます 。 こ れ は 引数 と 戻り 値 と も 呼ば れ ま す 。 関 数 に 引数 を 与え る と 、 関 数 の 
中 で 計算 や 処理 を 行っ て 、 戻 り 値 と し て 返し て くれ ます 。 中 で どん な 処理 を し て いる か は 具体 的 に 知る 必 
要 は な い の で 、 プ ログ ラム を すっ きり と まとめ る こと が で きま す 。 


(スルメ メス ルミ スル ミ メル ミ メル メ メル トミ メル ミ メ メル ミ メル トメ メル ミ メル トミ メル メ メル メ メス ルミ メルル メ ム メス ルト K メ メス ルミ メル K メル ミ コス ルミ メル ミ え 【) 
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K 、 Aa 全 着 ーー 
て も 


ME 


図 5-3 関数 の 概念 


function baiNiSuru( nyuryoku ) { 本 の 


var syuturyoku = nyuryoku * 2; 
FO ER return は 関数 の 出力 を 示し て いま 
} す 。 こ の 値 が 戻り 値 と し て 返り ます 


作っ た 関数 は 次 の よう に 使え ます 。 


05 


var hoqe = ba1N1Suru( 5 ); mm 


console.log( hoge ); // 10 


さら に noge を 2 倍 に し て 、 
ゞ ar hogeNoBai = ba1N1Suru( hoge ); 変数 hogeNoBai に 入れ ます 


conso1e.1og( hoge, hogeNoBa+ ): // 10, 20 


! JavaScript を 記述 する と き の ル ー ル 


ーー ゼ ゼ ye 


命名 規則 


変数 と 関数 の 名 前 は アル ファ ベッ ト あ る い は $ ま た は (アン ダー スコ ア ) で 始め ます 、 名 前 の 中 に 数 
字 を 含め て も 構い ませ ん が 、 一 番 最初 の 文字 に 数 字 を 使っ て は いけ ませ ん 。 特 別 な 文字 (!  #g ?>< な 
ど ) は 変数 や 関数 の 名 前 に は 使え ませ ん 。 ま た 、 大 文字 と 小文字 は 区 別 さ れる の で hoge と Hoge は 別 の 変 
数 で す 。 
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JavaScript に ちょ っ と 入門 


hoge OK 
Hoge 一 OK( 習 慣 的 に 、 頭 文字 を 大 文字 に する と クラ ス を 示し ます ) 
hoGE "OK 
hoge2 OK 
_ hoge OK 
Shoge OK 
hoge! NG 
2hoge NG 
ho#ge NG 


・ (セミ コロ ン ) 


今 ま で も 登場 し て いま し た が 、 処 理 を 終え た と き に は 最後 に |:] (セミ コロ ン ) を 入れ ます 。 日 本 語 
で 言う と |「。」 に 近い よう な 役割 が あり ます 。 


セミ コロ ン を 文 の 終了 に 使う 言語 は 多く あり 
ます (た と えば C 言 語 、C++、C#、Java な 
ど で す )。 し か し 、 じ つ は JavaScript は セミ 
コロ ン が な く て も 動作 し ます 。JavaScript で 
は セミ コロ ン は 必須 の 文法 で は あり ませ ん 
が 、 プ ログ ラマ ー の 習慣 と し て セミ コロ ン を 
使っ て いま す 。 逆 に 文 の 区 切り に セミ コロ ン 
を 使わ な い 言語 か ら 来 た プ ログ ラマ ー は 「,」 
を 嫌がる の で 、JavaScript で も 使い た が り 
ませ ん 。 サ ー バ ー で 使わ れる JavaScript(No 
de.js な ど ) で は 「:| を 余計 に 使う こと に 反対 
する プロ グラ マー も いま す 。 こ れ か ら ほ か の 
人 が 書い た JavaScript を 見 る 機会 が ある と 、 
上 [ 汗 を 使っ て いる 人 と 使っ て いな い 人 が いる 
と 思い ます の で 、 注 意 し て みて くだ さい 。 


コー ディ ング の スタ イル な の で 、 
仲間 と 合意 が と れれ ば 
どちら で も 大 丈夫 で す 。 
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コメ ント 

プロ グラ ム は 基本 的 に コン ピュ ー タ に 対し て 命令 を 出す た め の も の で す が 、 プ ログ ラム を 改善 する た め 
に 人 間 も ソ ー ス コー ド を 読む お こと が あり ます 。 分 か り に くい コー ド も 出 て きま す の で 、 次 に ソー スコ ー ド 
を 読む お 人 の た め に 、 コ メン ト を 残し て お く よ う に 心がけ まし ょ う (ちな み に 、 そ の 「 次 の 人 」 は 極め て 高 
い 確 率 で 数 ヶ月 先 の 自分 で す )。 コ ー ド だ け で は すぐ に 分 か ら な いこ と や 忘れ そう な も の は コメ ント と し 
て 残し ます 。 コ ンピュータ は コメ ント を 完全 に 無視 する の で 、 好 きなこ と を 書い て も ブ プログ ラム に 影響 は 
あり ませ ん 。 
一 シ ョ ー ト コメ ント 

1 行 以 内 に 収め る コメ ント は ショ ー ト コメ ント と 呼ば れ て いま す 。JavaScript は 「//」 を マー カー と 
し て 使っ て いま す 。 // の 右 に 書い て ある こと は 実行 時 に は すべ て 無視 され ます 。 


// こ れ は 実行 し な い 。 
var hoge = 5: // こ こ か ら こ の 行 の こと は 実行 し な い 。 
console.log( hoge ); // メモ :hoge の 出力 は 5 で す 。 


田 ロ ング コメ ント 
「/*」 で 開始 し 、「*/」 で 終わ り ま す 。 マ ー カ ー に 挟ま れ て いる 部 分 は 改行 され て いて も 無視 され ます 。 


/W コメ ント で す 。 
まだ コメ ント で す 。 
この あと 終り ます 。 */ 


この よう に 複数 行 を 一 気 に コ メン ト で きま す が 、 ち ょ っ と 分 か り に くい の で ほとん どの プロ グラ マー は 
ロン グ コ メン ト を 次 の よう に 書い て いま す 。 


/** 

* コメ ンド Z す 。 

* まだ コメ ント で す 。 
* この あと 終り ます 。 
が 
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JavaScript に ちょ っ と 入門 


無駄 に |「*] (アス タリ スク ) を 書い て いま す が 、 マ シン か ら 見 る と 途中 の 「*」 は すべ て ロン グ コ メン 
ト の 中 に 入っ て いる の で 、 実際 に は 意味 を 持ち ませ ん 。 し か し 、 コ メン ト は 人 間 の た め の も の で すか ら 、 


コメ ント を 分 か りや すく する た め に マー カー を 入れ て いま す 。 
田 コ メン ト ア ウト 
ーー 時 的 に 何 か の 実行 を 止め あたい とき は コメ ント アウ ト を する こと が あり ます 。 た と えば 次 の よう な コー 


ド が あっ た と し ます 。 


yar hoge = 5: 
console.log( hoge ); 


console.log を 実行 し た く な いと き は 、 こ れ を コメ ント アウ ト し まし ょ う 。 


var hoge = 5; 
//console.log( hoge ); 


デバ ッ グ や テス ト の と き に は 、 こ うし た コメ ント アウ ト を よく 行い ます 。 


コー ドブ ロッ ク 
さき ほど 関数 を 書い て いる と き に 出 て き て いま す が 、JavaScript で は コー ド の まとまり を ~ } で 団 
み ま す 。 関 数 を 書く と き に は この コー ド プ ロッ ク を 使い ます 。 


function doHoge( x ) { 


var y = (x + 4) *2; 


return Yy; 


の ちほ ど 説 明 す る 制御 構文 を 書く と き に も 基本 的 に は コー ドブ ロッ ク を 使い ます 。 ブ ロッ ク の 中 身 が 1 
行 し か な いと き は { ~ } は な く て も 大 丈夫 で す 。 こ の た め 、 1 行 の と き は コー ドブ ロッ ク を 書か な いと い 
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う 人 も いま す が 、 実際 に は と て も 危険 で す 。 あ と か ら 別 の 人 が 不用 意 に 1 行 を 足し た と する と 、 プ ブロ グラ 
ム が うま く 動 作 し な く な る 可能 性 が あり ます 。 こ の トラ ブル は よく あり ます の で 、 注 意 し て くだ さい 。 


(2| JavaScript の 型 


eas a Ui EE a TE = El (EE EE | (EE EE = i = | a a [| 1 [CE i EE (EE = EE [i CE EE (i 1 ニョ ニ ニート ニート ニー ニー に 


変数 に は 型 と いう も の が あり ます 。 こ れ は デー タ の 種類 を 表す も の で 、 た と えば 数 字 の 計算 を し た けれ 
ば 数 値 型 の 変数 、 文字 を 扱い た けれ は ば 文字 列 型 の 変数 を 用 いま す 。 た と えば 、 数 値 型 の 1†1 は 2 で す が 、 
文字 列 型 の "1" キキ"1" は "11" (文字 列 は "や ' で 囲み ます ) と 文字 と 文字 を くつ つけ た も の に な り 、 扱 い が 変 
化し ます 。 


文字 列 (String) 


文字 列 型 は クオ ォ テ ーション ("や ') で 囲ま れ た 文字 列 を 与え る こと で 作れ ます 。 


ー ダブ ルク オォ テー ショ ン (") 
yar oharaName = "キャ プ テ ン ": 


yar oharaName = ' キ ャ ブテン ': 


シン グル クオ ォ テ ーション () 


05 


文字 列 中 で シン グル クオ ォ テ ーション や ダブ ルク オォ テー ショ ン を 使い た い 場合 は 次 の よう に 書い て くだ さ 


い 。 
ダブ ルク ォ テ ーション 中 で シン グル ク ォ テ ーション を 使う 
NN RC ダブ ルク ォ テ ーション 中 で シン グル ク ォ テ ーション を 使う 
var answer = "He is called 「 大 郎 ": 
var answer = 'He is called "太郎 "": 


シン グル ク ォ テ ーション 中 で ダブ ルク ォ テ ーション を 使う 
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JavaScript に ちょ っ と 入門 


数 字 (Number, Integer, Float, Double) 
JavaSocript で は 数 字 を 変数 に 与え る こと で 数 値 型 の 変数 が 作れ ます 。 


小数 点 付き 
34.00; 


var 2 ーー 34: 


小数 点 な し 


> = 


ブー リア ン と ブー ル 代 数 (Boolean) 


ブーリアン は 論理 型 と も いわ れ 、「 真 = true] か 「 偽 = false」 と いう 2 値 し か と ら な い デ ー タ 型 で す 。 


var x = true; 


Va エ y = false; 


ブー リア ン 型 の デー タ は 「= 三 ] と 「!=]」 そし て |「 ニ ニニ 」 と 「!==」 と いっ た 演算 子 で 演算 が 可能 で す 。 
た と えば 、 次 の よう な コー ド を 見 て み ま し ょ う 。 


Wa と = 1 = ニー1: 


console.1oqg( x ): 値 は 真 (tcue) 


== は その 左右 の 値 を 比較 し て 一 致し て いれ ば 真 (true) を 返す 演算 子 で す 。 上 の 例 で は 1 と いう 同じ 値 
を 比較 し て いま す の で 、 変 数 x に は 真 (true) が 入り ます 。!= は 逆 で 一 致し て いな いと き に 真 が 返り ます 。 


値 は 真 (tcue) 


console.1od( 1 == 1 ): 
値 は 偽 (Ea1se) 
7 


console.log( 1 == 2 


(メル K メ メス ルミ スルメ メル トミ メ ルミ メ メル トミ メス ルミ メ メル ミ メス ルミ メル ミ メル トミ メル メ メル メ メス ルミ メ スルメ メス ルト k メ メル ルミ メス ルミ ユメ ルミ コス ルミ メル ミ え 【) 
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値 は 偽 (Ea1se) 
console.1od( 1 '= 1 ); 


console.log( 1 != 2 ); 


値 は 真 (true) 


と ころ が 、JavaScript は 親切 すぎ る と ころ が あり 、 ち ょ っ と し た 落と し 穴 が あり ます 。 次 の よう な 例 
を 見 て くだ さい 。 


aornsole.log( 1 == "1 0) 値 は 真 (true) 


この 場合 は 数 値 型 の 1 と 文字 列 型 の "1" を 比較 し て いる の で 、 厳 密 に いえ ば 真 に は な ら な い は ず な の で 
す が 、JavaScript は 親切 に も 真 を 返し て きま す 。 型 も 同じ か どう か を 知り た いと き は === と !== の 演算 
子 を 使い ます (どちら も 通常 より 1 つ = ニ が 多い )。 こ うす れ ば デー タ の 型 まで 一 致す る が 確認 する よう に な 
り ま す 。 


値 は 偽 (Ea1ss) 
console.log( 1 === "1" ): 

値 は 偽 (Ea1ss) 
console,log( 1 === “2 Yj 

値 は 真 (true) 
console.log( 1 '== "1" ); 
Gonaole.1od( 1 == "2 ): 

値 は 真 (tcue) 


Undefined (未定 義 ) と Null (ヌル ) 


両方 と も 何 も 変 数 が な いこ と を 示し て いま す が 、 意味 上 の 違い が あり ます 。 
undefined は 「 未 定義 | の 意味 で 、null (| ヌル | と 呼び ます ) は | 定義 し た が 、 値 は な い 」 こと を 意 
味 し て いま す 。 初め て undefined と null を 見 た 方 は すこ し 戸惑う か も し れ ま せん が 、 ゲ ー ム を 作る うえ で 


は あま り 影 響 は あり ませ ん 。 
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JavaScript に ちょ っ と 入門 


変数 は 未定 義 
var Cars; 
person = null; 変数 person に は 値 が な い 


| 配列 (Array) 


に ーーー ト ーー トー ニー ニー ーー ニニ ニニ 


配列 は 変数 に 近い も の で す が 、 1 つの 箱 で は な く 、 複 数 の 邊 が ひと まとまり に な っ た も の で す 。 


配列 : 変数 の セッ ト 
図 5-4 配列 の 概念 


この よう に ひと つの 変数 名 で 複数 の デー タ を 管理 で きま す 。 


Far khairtety 三 1,2,3,4]: 


配列 の デー タ の 型 は 全部 同じ 型 で ある 必要 は あり ませ ん が 、 通 常 は 同じ 型 の も の を まとめ ます 。 


ariihairketu = 2 


配列 の デー タ に アク セス する に は イン デック ス (index) と いう 番号 で どの 箱 か を 指定 し ます 。Java 
Script、 そ し て ほとん どの 言語 の 配列 の イン デック ス は o か ら 始 まり ます 。 日 常 的 に は 変 で す が 、 コ ン ピ 
ュー タ の 世界 で は 0 で 始ま る ケー ス が よく あり ます 。 


トル TX メル K スルメ メル K メル K メル K スルメ メル トミ スルメ メル ミ メル トミ スルメ スルメ メル メ メル K メル K メ メル ミ メ スルメ メル K メ 3 ル X ルミ ミ 1) 51 


var message = [ Helle の Array I 


文字 列 "Hello" が 入っ て いる 


console.log( messade[O] ); 


console.log( message[l] ); 


文字 列 "array" が 入っ て いる 


(た | オプ ジェ クト (Object) 


で 1 に (に < に 5 = 3 = 5 = = に = = = 3 = に = FR に = p= に ゴ に に ゴ | = := に) 財 雪 寺 寺 圭 寺 当 
オプ ジェ クト は デー タ や 関数 を ひと つ に まとめ る た め の 型 で す 。JavaScript の 世界 で は 配列 も オブ ジ 
ェクト の 一 種 で す 。 ち ょ っ と 例 を 見 て み ま し ょ よう 。 


var hero = { 
name: "キャ ブテン リリ, 
hp: 100, 
mp: 50, 


オブ ジェ クト に 紐 付け られ た デー タ は 変数 と は 呼び ませ ん (実際 は 変数 と 同じ で す が )、 オ ブ ジ ェクト 
に 入っ て いる デー タ は プロ パテ ィ (property) と 呼ば れ て いま す 。 先 の 例 で は hsxo オ ブ ジ ェクト の 中 に 、 
name、hp、mp と いう プロ パテ ィ が 用 意 さ れ て いま す 。 

プロ パテ ィ に アク セス する に は オブ ジェ クト 名 の 後ろ に 、「 .」 (ドッ ト ) を 付け て 表現 し ます 。 


console.1od('hero HP:", hero.h で ) hero オ ブ ジ ェクト の ns プロ パテ ィ の 値 が 表示 され る 


さら に オブ ジェ クト に は 関数 も 紐 付け られ ます 。 こ ご の 場合 も 名 前 は 関数 で は な く メ ゾ ソ ッ ド (method) 
と 呼ば れ ま す 。 


今 ま で 使っ て きた conso1es . 1og() の .1og() の 部 分 は conso1as の オブ ジェ クト に 紐 付け られ た 1og メ 
ソ ッ ド で し た 。 
自分 で オブ ジェ クト に メソ ッ ド を 追加 し た いと き は funetion を 使っ て 定義 し て くだ さい 。 getKougek 
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JavaScript に ちょ っ と 入門 


iRyoku と いう 関数 を メソ ッ ド と し て 定義 し た い 場 合 は 次 の よう に し ます 。 


var hero = { 
function getKougekiRyoku( buki ) { 
var kougekiRyokuGoukei = this.attack + buki.attack; 


return kougekiRyokuGoukei; 


オブ ジェ クト の パラ メー タ と メソ ッ ド は 「 オ ブ ジ ェクト 」 と 「 パ ラメ ー タ また は メソ ッ ド 名 」 を 「.」 
で 区 切っ て 表現 し ます が 、 も う ひ と つ 方 法 が あり ます 。 そ れ は 配列 の よう に オブ ジェ クト [" パラ メー タ 
また は メソ ッ ド 名 "] と 書く 方 法 で す 。 


console.log("hero HP:", hero[ "hp"] ) 


と の 書き 方 は あま り 分 か りや すい コー ド で は あり ませ ん が 、| パラメータ また は メソ ッ ド 名 」 を 変数 に 
入れ て 、 そ の 変数 で オブ ジェ クト に アク セス し た いと き に 便利 で す 。 


var parameter = "hp"; hero hp 100 と 出力 され る 


console.log("hero", parameter, hero[parameter]); 


var parameter = "mp"; hero mp 50 と 出力 され る 


console.log("hero", parameter, hero[parameter]); 


| typeof 


a Et UE EE EE (IE EE (EE TE EE EH (EE EE EE EE EE EE (EE ED) EE [EI IE EE ーー トー トーー EEE] UE CES [EI UE EE (EE [EH EE ET CE EE (EE [EE [EO 


変数 な どの 型 を 調べ た いと き は ctypeof を 使い ます 。 


ee を ee を ee メル メ メル K メル メ スル K メス ルミ メス ルミ メル ミ メル K メト ルミ メ メル ミ メ スルメ メル K ム メル ミ メ メメ ルミ メ ルミ メ メル ミ ミル ミ メル ミ 1) 53 


conso1e.1og(typeofE "太郎 ") 
console.1od(typeof 3.14) 


ブー リア ン 
console.log(typeof false) 
オブ ジェ クト 
console.log(typeof [1,2,3,4]) オブ ジェ クト 


console.log(typeof {name:' 太郎 ', age:20}) 


typeoE を 使 つ と き 結果 は 文字 列 で 返っ てき ます が 、 そ れ を 変数 に も 入れ る こと も で きま す 。 


var hoge = ら 5: 
偽 (false) 
var hogeType = typeof hoge; 


console.log(hogeType = テー "string'") 


console.log(hogeType == "number'") 


(た | スコープ (Scope) 


a = [loan Ga =a Se (i [i = iE Ie] [EE = Ce = ps gs [i I IE (EE! (i pi = DE = [i CE == Ie] as Ce [EO] 
スコ ー プ に は 「 空 間 」 また は 「 範 囲 ] と いう 意味 が あり ます 。 こ れ は 関数 の 使え る 範囲 を 限定 する も の 
で す 。 
プロ グラ ム で は 基本 的 に ブロ ッ ク や 関数 の 内 部 の 変数 に 外 か ら ア クセ ス す る こと は で きま せん 。 逆 に ブ 
ロッ ク や 関数 の 内 部 か ら 外 の 変数 は 使う こと が で きま す 。 ち ょ っ と 例 を 見 て み ま し ょ う 。 


var fruitName = " オレ ンジ": 


この 中 は EruitName 変 数 が 使え ます 


Funo モ on myFunction() { 


} この 中 は EruitName 変 数 が 使え ます 


この 場合 、 関 数 の 中 か ら 外 側 の 変数 EruitName は 利用 で きま す 。 し か し 関数 の 中 で 定義 し た 変数 に 外 
か ら ア クセ ス す る こと は で きま せん 。 


54 (は MX スルメ メス ルミ メ メル メ メル トメ スルメ メル ミ スルメ メル ミ メル トメ メス ルミ メト ルミ メ メメ ルミ メル ミ メル ミ メル ミ メ メル メ メル ミ メ スル メ メル K メル ミ 1 は ) 


JavaScript に ちょ っ と 入門 


function myFunction() { 


var fruitName = "オレ ンジ ": 


この 中 は fruitName 変 数 が 使え ます 
} 
外 で は EruitName 変 数 が 使え ませ ん 


プロ グラ ム の 一 番 広 い ス コー プ は タダ ロー バル スコ ー プ と 呼ば れ て いま す 。 そ し て グロ ー バ ル 以 外 は ロー 
カル スコ ー プ と 呼ば れ ま す 。 プ ログ ラム を 書く と き は 極力 ロー カル スコ ー プ を 使う よう に し まし ょ う 。 理 
由 は 複数 あり ます が 、 お も な も の は 次 の と お り で す 。 


1. 同じ スコ ー プ で 名 前 が 重複 する と バグ が 起き や すい 
2. パフ ォ ー マ ンス の 面 か の らい えば 、 ひ と つ 外 の スコ ー プ の 変数 を 探す に は 時 間 が か か る 
3. ほか の フレ ー ム ワー ク 、 ラ イブ ラリ 、 ツ ー ル な ど と 変数 名 が 重 後 する こと を 防げ る 


グロ ー バ ル 変 数 を 使う と き は 、 そ の 影響 に つい て よく 考え て か ら に し まし ょ よう 。 


| JavaScript の 制御 構文 


= = = = = 時計 = = = = = = = = = = 上 時 = 上 = 圭輔 = 主計 = 革 記 


今 ま で 見 て きた JavaScript で 計算 な ど は で きる と 思い ます が 、 ま だ 条件 に 応じ て プロ グラ ム の 流れ を 
作る こと は で きま せん 。 プ ブロ グラ ム の 流れ を 作る に は 制御 構文 を 使う 必要 が あり ます 。JavaScript で 使 
える 制御 構文 は 次 の と お り で す 。 


break for で in throw 
catch function try 
continue if ~ else var 
do ~ while return while 
for switch ~ case 


すべ て を 理解 する 必要 は あり ませ ん が 、 最 低 限 if ~ else、for、for ~ in、switch へ case、 
break、continue、while を 覚え て お け ば よい で し ょ う 。 


if ~ else 
ある 条件 を 調べ て 、 真 (true) だ っ た ら 実 行 し 、 偽 (false) だ っ た ら else 以 下 を 実行 し ます 。 
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この 条件 で は 常に 真 (true) に な り ま す 


+ 下 (ユエ ユエ +L = テー= ミ ク 2 ) { 
console.1oq( "OK ) 》 
} else { こち ら の 行 が 実行 され る こと は あり ませ ん 


console.log( "NG  ): 


for 
処理 を 限ら れ た 回 数 繰り 返し た いと き に 使い ます 。 


変数 : が 0 か ら 9 ま で の あい だ 、10 回 繰り 返し ます 
FEOP(Va ど ユー0: エエ で 10: エキ キキ) { 


console.logt( count , i); 


for ~ in 
と ある 配列 また は オブ ジェ クト に 対し て ルー プ を 行い ます 


indexO:a 
index 1 : b 
index 2: 0 


9 の ョ や dats a 8 "es 6 ]: 
for (var 1 i1n data) { 


console.log( dndex TT i <: , datalil }; 


Switch ~ case、default と break 


複数 の 条件 を 判定 し ます 。cass は switch の 条件 の 分 岐 、 そ し て どの 条件 に も 当て は ま ら な い デ ー タ は 
defau1 も の 分 岐 に 入り ます 。bpreak が 実行 され る と 、 条 件 分 岐 の 処理 を 終了 し て 、 次 に 進み ます 。 
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JavaScript に ちょ っ と 入門 


sw1toh(x) { x が 0 だ っ た 場合 の 処理 


case 0: 


console.log( zero  ): 


DFeak/ | . が 1 だ っ た 場合 の 処理 
case 1: 


console.1og( one ): 


DFeaK: | それ 以外 の 場合 の 処理 
default: 


console.log( other  ): 


break; 


break と continue 
break で ルー プ を 中 断 し ます 。 


構文 上 は i が o か ら 4 に な る まで ルー プ す る よう に な っ て いる が 
fortyar i=Q 1 で 5 1tt+) {1 
ーー 3) 1 
ュ が 3 の 時 点 で ルー プ を 抜け る 
break; 
} : が 1、2 ま で は 実行 され る 
console.log( count  , 1); 


continue は ルー プ の スキ ッ プ を し ます 。 


Fo で (Va や 1=0» ユ < 5: 1++) { 


if (i == 3) { 
. i が 3 の と き は ルー プ を スキ ッ プ する 
continue; 
’ We 6 1、2、4、5 ら が 出力 され る 
console.1od( count , 1); 
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while 
for の よう に ルー プ を し ます 。 ror で も rhi1s も 同じ こと は で きま す が 、fEor を 見 る こと が 多い よう で す 。 


Yar i=0 


while(i < 10) { 


ty 0、1、2、3、4、5、6、7、8、9 が 出力 され る 
console.log(i) 


JavaScript を も っ と 知り た いあ な た べ ! 

この 章 で は 本 書 で 紹介 し た コー ド を 読む の プロ グラ ミン グ 言 語 の 世界 に は 
に 便利 な よう に JavaScript に つい て いろ い 計 還 in と と 3 の 7A 北 219E 記 に ) 
ろ と 説明 し まし た が 、 急 ぎ 足 で し た の で 初め 人 

て プロ グラ ミン グ 言 語 に 触れ る 人 に は 、 理 
解 し きれ な いこ と も 残っ て し まう か も し れ ま 
せん 。 し か し 、 JavaScript を 勉強 し て みる と 、 
さら に いろ いろ な こと が 見 えて くる は ず で す 。 
ここ で は まだ JavaScript の 一 部 し か 説明 で 
き て いま せん が 、JavaScript を マス ター する 
た め の 本 は た くさ ん あり ます の で 参考 に し て 
くだ さい 。 
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「JavaScript の 絵本 」 
(株 ) アン ク 著 、 翔 泳社 、ISBN978-4-7981-2617-3 
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enchant.js の 環境 を 整備 


| nchantis を ケン NIC 
i ま 


ゝ ーー @ 9.G 2) [mdexhm = ー 
サン ブル ブロ ク ラム の 動作 を 確 | a > | et file 7/7Ueers/robem/Deskto op/pirateTactics/enchantjs-builds-0.8.1/examples/beginner/he… < 三 園 
1 


ブラ ウザ の デバ パッ グ ツ ー ル で " 
エラ ー が な いこ と を 確認 し た ら 、 | 

| いよ いよ プロ グラ ミン グ 開 始 で す 

富有 に ieWOrK Sources Timeiine Profiles Resources AudIts Console 二 夫 x 


[swes 1 Event lsteners ※ 
element.style + 


本 章 で 勉強 する こと 


e フレ ー ム ワー ク は ゲー ム の 開発 を 自分 の 作り た いも の に 合っ た フレ ー ム ワ 
助け て くれ る 強い 味方 ー ク を 選 ぼ ぽう 
@ 作る プロ グラ ム や ゲー ム の 種類 に よっ て e enchant.jS フ レー ム ワ ー ク を 
いろ いろ な フレ ー ム ワー ク が ある イン スト ー ル し て 試し て みよ う 
(/1 フ フレ ー ム ワー フ に ノ ー ル っ て 5 ? 


フレ ー ム ワー ク と いう の は どん な も の で し ょ うか ? オン ライ ン 百 科 事 典 の Wikipedia に よれ ば 、 フ レ 


enchant.jS の 環境 を 整備 


ー ム ワー ク は 次 の よう に 説明 され て いま し た 。 


プレ ー ム リー ク (framework) 


開発 ・ 運 用 ・ 意 思 決 定 を 行う 際 に 、 そ の 基礎 と な る 規則 ・ 構 造 ・ ア イデ ア ・ 思 想 な どの 集合 の こと 。 日 本 
語 で は | 枠組 み ]」 な ど と 訳 さ きれ る こと が 多い 。 一 wikipedia (http:/ja.wikipedia.org/wiki/ フ レー ム ワ リーク ) 


コン ピュ ー タ の 世界 に お ける フレ ー ム ワー ク は 、 あ る タイ プ の ソフ トウ ェ ア で 
よく 使う 機能 を あら か じ め プ ログ ラム し て 、 使 いや すく 提供 し て くれ る も の で す 。 
た と えば 、 ゲ ー ム の フレ ー ム ワー ク で あれ ば 、 ゲ ー ム で よく 使う 画面 の 制御 や 音 
声 の 機能 を 簡単 に 利用 で きる よう に し て くれ ます 。 ブ プログ ラム の 「 枠 組み] ( フ 
レー ム ワ ー ク ) だ けが 用 意 さ れ て いる の で 、 そ の 枠組 み に 従う こと で 簡単 に 書く 
こと が で き 、 プ ログ ラム の 見 通し を 良く し 、 エ ラー の 予防 に も な り ま す 。 

また 、 フ レー ム ワ ー ク の 助け を 借り る こと で 、1 つ の ソー スコ ー ド か ら PC 用 と スマ ー ト フォ ン 用 の プ 
ログ ラム を 作り 分 ける こと も で きま す 。 も ちろ ん 、 す べ て の ケー ス で その よう な 作り 分 けが 簡単 に で きる 
わけ で は あり ませ ん が 、 開 発 環境 の 違い を 吸収 する こと も フレ ー ム ワー ク の 役割 の ひと つ で す 。 


ソー ル 


一 方 、 ツ ー ル は プロ グラ ミン グ や ソフ ト 作 り を 助け て くれ る 各種 の ソフ トウ ェ ア の こと で す 。 プ ログ ラ 
ミン グ ツ ー ル と も いい ます 。 


プロ グラ ミン ゲ グ ツー ル (programming tool) 
プロ グラ ミン グ ツ ー ル また は ソフ トウ ェ ア 開 発 ツ ー ル と は 、 ソ フト ウェ ア 開 発 者 が プロ グラ ム や アプ リ ケ ー シ 


ョ ン を 作成 ・ デ バッ グ ・ 保 守 ・ サ ポー ト す る た め の ソ フト ウェ ア で ある 。 一 般 に 比較 的 単純 な プロ グラ ム を 
指し 、 そ れ ら を 複数 組み 合わ せ て 作業 を 行う 。 
ーwikipedia (http://ja.wikipedia.org/wiki1/ プ ログ ラミ ング ツー ル ) 


た と えば 、 ソ フト ウェ ア の エラ ー を 調べ て 原因 を 特定 する 手がかり を 与え て くれ る デバ ッ ガ や 、 ソ フト 
ウェ ア の 性 能 を 調べ る ツー ル 、 テ スト ツー ル 、 ソ ー ス コー ド の 変更 履歴 を 管理 し て くれ る ツー ル な ども あ 
り ま す 。 ご これら を 組み 合わ せ た 統 合 開発 環境 (IDE : Integrated Development Environment) も あり 
ます が 、 こ ご の 本 で は そこ まで 大 が か りな ツー ル は 使い ませ ん 。 
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(2| enchant.js 


トト = t= = i t= ER = ££ = hE 2 = ER EE EE fB EE = ME EE ME = = EE FE EE EE = = 


今回 の ゲー ム を 作る た め に は どん な フレ ー ム ワー ク が よい の か 、 い ろ い ろ 検 討 し まし た 。 

2 < 3 年 前 と 比べ で て も フレ ー ム ワー ク は どん どん 増え て いる の で 、 ど の フレ ー ム ワー ク を 選ぶ か だ け で 
も 、 深 く 悩 みそ う で す 。 そ ん な 場合 は と に か く 話 を 前 に 進め る た め 、| 自分 が 今 作 り た い ゲ ー ム 」 と | 自 
分 が 今 開発 に 使え る 時 間 ] を よく 考え た うえ で 、 そ の 条件 に 当て は まる フレ ー ム ワー ク を ざっ くり と 絞っ 
て し まい まし ょ う 。 

も ちろ ん 、 そ うし て みて も 複数 の 候補 は 残り ます 。 そ し て 、 い ろ い ろ 調 べた と し て も 自分 の や り た いこ 
と と 完璧 に 一 致す る フレ ー ム ワー ク は 基本 的 に な いと 思っ て くだ さい 。 ど の フレ ー ム ワー ク に も た くさ ん 
の 強み と 弱み が あり ます の で 、 ず っ と 悩み 続け る より は どれ か を 選ん で 前 に 進む こと が 肝心 で す 。 フ レー 
ム ワ ー ク を 使っ て みれ ば その フレ ー ム ワー ク の 特質 が いろ いろ と 見 えて くる の で 、 目 分 の 要件 に 合わ な け 
れ ば その と き に フレ ー ム ワー ク の 変更 も 考え まし ょ う 。 


| 也 Web ブ ラウ ザ な ど で 「 フ レー ム ワ ー ク ] 「 ゲ ー ム | な どの キー ワー ド で 検索 し て みる と 、 
さま さま な 情報 が 得 ら れ ま す 。 ま た 、 ゲ ー ム に 特 化 し た フレ ー ム ワー ク は | ゲー ム エ 
ンジ ン | と いう キー ワー ド で も 紹介 され て いま す 。 「 

ゲー ム 用 フレ ー ム ワー ク は 開発 する ゲー ム の 種類 や プロ グラ ム が 動作 する プラ ッ ト フ 

ォ ー ム に よっ て 分 類 が 可能 で す 。 た と えば 、3D ゲ ー ム を 作る た め に は Unity や Unreal 
Engine な ど が 知ら れ て いま す 。 ま た 、 ブ ラウ ザ ゲ ー ム で あれ ば 本 書 で も 取り 扱う 
enchant.js、gameQuery な ど が 有力 で し ょ うか ? ノベル ゲー ム に 特 化 し た フリ ー の 
吉里 吉里 や NScripter も あり ます 。 

これ ら の ゲー ム エ ン ジン で スマ ー ト フォ ン の ゲー ム を 作る こと も で きま す が 、 ス マー ト 
フォ ン 向 け の ゲー ム エ ン ジン と し て は Cocos2d-x や Sprite Kit な ど が 知ら れ て いま す 。 


今回 の プロ ジェ クト に 必要 な の は 、 無 料 で 2D ゲ ー ム が 作れ 、 で きた ゲー ム を 簡単 に シェ ア で きる こと 
で す 。 そ こ で 今回 は スマ ー ト フォ ン 専 用 の フレ ー ム ワー ク を 外す こと に し まし た 。 ス マー ト フ ォ ン アプ ブリ 
ケー ショ ン の 開発 は (基本 的 に ちょ よっ と で す が ) お 金 が か か る も の が 多い の で 、 ブ ラウ ザ 系 の フレ ー ム ワ 
ー ク に 絞り まし た 。 ブ ラウ ザ 用 の フレ ー ム ワー ク な ら 、Windows や Macintosh な どの PC や スマ ー ト フ 
ォ ン で も 同じ よう に 動作 する 2D ゲ ー ム が 作れ ます 。 

こう や っ て 絞り 込ん を で も 、 有 有力 な ブラ ウザ 系 フレ ー ム ワー ク だ け で も 候補 は 10 点 近く に の ぽ ぼり まし た 。 
それ ぞ れ 、「 パ フォ ー マ ン ス 」、| 高 度 な 開発 に も 対応 し て いる 」、「3D も で きる 」、「 使 いや すさ 」 など に フ 
ォ ー カ ス し て いて 特徴 が あり ます 。 今 回 は お も に 使い や すさ と / 分 か りや すさ で enchant.jjs を 選び まし 
288 
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enchant.jS の 環境 を 整備 


ゆ enchant.js の Web サ イ ト enchant.jS Introduction 


http:/enchantls.com/ja/ 


enchant.jS 


A simple JavaScript framework for creating games and apps 


3 View on github 


enchant.js 


Introduction 
Latest Update 


< enchant.js vC.8.2 を を 中 一 スレ しま 
し た 


enchantjsS の Web サ イト で は 、 そ の 特徴 を 次 の よう に 紹介 し て いま す 。 


. カ ンタ ン に ゲー ム や アプ リ を 開発 で きる HTML5 + JavaScript フ レー ム ワ ー ク で す 。 
.201 1 年 に 公開 され 、 す で に 1,000 本 以上 の ゲー ム / ア プリ が 公開 され て いま す 。 

. オー プン ソー ス (MIT ラ イセ ンス ) で 、 無 料 で 利用 で きま す 。 

・ ド キュ メン ト ・ 書 籍 ・ チ ュー トリ アル サイ ト が 充実 し て いま す 。 


・ た くさ ん の プラ グイ ン で 機能 を 拡張 で きま す 。 
. UEI/ARC を 中 心 と し た メン バ に よっ て 開発 ・ メ ン テ ナ ンス され て いま す 。 
・ プ ログ ラミ ンク 教育 の た め に も 利用 され て いま す 。 


この 中 か ら 、 本 書 と し て は 7 を 重視 し 、2 の 実績 も 考慮 し て enchant.js を 選択 し まし た 。 
実際 に ほか の フレ ー ム ワー ク も 試し て み ま し た が 、enchantjs は シン プル で も 2D ゲ ー ム に 必要 と され 
る 機能 よし っ か り と 備わっ て いま す 。 普通 の 2D の ゲー ム で あれ ば 短 時 間 で 開発 が で きる の は 確か で す 。 


(Z| enchant.js を イン スト ー ル 


a = = = = = = = = = = i = = = FE = = = = = I = = = = = I= EE = = = = = = [= FE = = FE に 


enchant.js は まだ 開発 が 継続 され て いる フレ ー ム ワー ク の た め 、 頻 繁 に バー ジョ ン ア ッ プ され て いま 
す 。 最 新 バ ー ジ ョ ン は 、 い つ で も Web サ イト か ら ダ ウン ロー ド で きま す が 、 今 回 作る ゲー ム に つい て は 
統一 し た バー ジョ ン で 開発 を 進め る も の と し ます 。 

本 書 の ダウ ン ロ ー ド サイ ト か ら PirateTactics.zip を ダウ ン ロ ー ド し まし ょ う 。 こ の アー カイ ブ の 中 に 
今回 利用 する enchantjs の バー ジョ ン 0.8.2 と ゲー ム の ソー スコ ー ド な ど が 入っ て いま す 。 


本 書 サ ンプ ブル ダウンロード ベ ペー ジ 
http:/www.shoeisha.co.jp/book/download/9784798137841 


PirateTactics.zip が ダウ ン ロ ー ド で きた ら 、 ア ー カ イブ を 解凍 し て 、 フ ォ ル ダ を まる ご と コピ ー し ま 
し ょ う 。 一 時 的 な ら デ スク トッ プ に 展開 し て も 構い ませ ん 。 


スルメ メス ルミ スル ミ メス ルミ メル メ メル ミ メル トメ メル ミ メル トメ メル ミ メル トミ メル メ メル メ メス ルミ メ メス ルル メ メス ルト k メ メル ミ メル K メ メル ミ メス ルミ メル ミ え 1) 
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X| enchant.js の 動作 チェ ッ ク 


に トー ト トー に に トー トニ ニニ に に 


新しい フレ ー ム ワー ク や ツー ル を 使う と き は 、 基 本 の 動作 チェ ッ ク が 欠か せま せん 。 そ の た め 、 ま ず は コ 
ビー し た enchant.jsS に 付い て いる サン プル を 起動 し て み ま し ょ う 。 

デス クト ッ プ に 解凍 し た 場合 は 、enchantjs-builds-0.8.2-b 一 examples 一 beginner 一 hellobear 
と フォ ル ダ を 開く と index.html が あり ます 。 こ れ を Web ブ ラウ ザ (今回 は Google Chrome) に ドラ ッ グ 
& ド ロッ プ し ます 。 す る と 、 ブ ラウ ザ の 画面 に 、 歩 いて いる クマ が 現れ ます 。 

この よう に クマ が 見 えて 無事 に 歩け ば 、enchant.js の 場合 、 と りあ え ず 動作 に 必要 な 環境 は クリ ア し て 
いる と 判断 し て よい で し ょ う 。 


9 O 9 / |] index.htrml x ーー 


で " 0 file:///Users/robert/Dropbox/Public/pirateTactics/enchant.js-buil 


a 
(| デバッグ ツー ル を 使 お う 
人 

クマ が ちゃ ん と 歩い た ら 基 本 的 に は 問題 な い は ず で す が 、 も っ と 動作 を 確実 に 確か め る た め に ブラ ウザ 
の デバ ッ ク グ 機 能 を 使っ て みる こと に し ます 。Chrome の デバ ッ グ 機 能 は Chrome に 標準 で 備わっ て いる プ 
ログ ラミ ング ツー ル の ひと つ で 、 エラ ー が 有る か 無い か 、 どこ に エラ ー が 起き た か を 簡単 に 確認 で きま す 。 

デバ ッ グ ツー ル を 立ち 上 げ る に は Chrome の 開発 環境 を 開く 必要 が あり ます 。Mac OS の 場合 
[Command] + [Option] 十 [i の キー を 同時 押し する と 開き ます 。Windows の 場合 は [F12] キー 
また は Ctrl] 十 [Shift] + 加 で す 。 

バグ と いう 言葉 の 語源 は 文字 どおり 英語 の Bug ( 虫 ) か ら 来 て いま す 。 し か し 、 こ ご の 言葉 は コン ピュ ー 
タ の 登場 以前 か ら 、 機 械 の 原因 不明 な 不具 合 を 表す 言葉 と し て 技術 者 の あい だ で 使わ れ て いま し た 。 


バグ ー プ ログ ラム の 不具 合 


デバ ッ グ ーー パグ を 解消 し て 不具 合 を 治す こと 
エン バグ 間違え て バグ を プロ グラ ム に 加え て し まう こと 


(は 人 X メ スルメ スルメ メル メ メル トメ スルメ メル ミ スルメ メス ルミ メル トミ メメ ルミ メト ルミ メ メメ ルミ メス ルミ メル ルミ メル ミ メ スルメ メル ミ メ スル メ メス ルミ メル ミ 1) 


enchant.jS の 環境 を 整備 


ここ で 一 番 右 に ある デバ ッ グ ツー ル の コン ソー ル の タブ を 開い て みて 、 と くに 赤い エラ ー メ ッ セ ー ジ が 
出 な けれ ば 問題 あり ませ ん 。 


@OO / [indexhem EE も 
を と つ で 申 fle:///Users/robert/Dropbox/Public/pirateTactics/enchant.js-builds-0.8.1/examples/beginner/hellob.… マ ? 


Q Elements Network Sources Timeline Profles Resources Audits1Console | 
GO YY <topframe> v 
> | 


何 も エ ラー は 出 て ませ ん 


同じ examples フ ォ ル タダ に は 、 ほ か に も さま ざま な サン ブル が あり ます の で 、 確 認 の た め に ひと と お り 
動作 させ て みる と よい か も し れ ま せん 。 


( これ か ら 自 分 で ゲー ム を 開発 を し て いる と 、 根性 と デバ ッ グ ツー ル は 
プロ グラ ム が うま く 動 作 し な いこ と が よく あぁ EE SRE NC TG CL 
る と 思い ます 。 簡単 な スペ ルミ ス や 細か い 5 
コー ド の エラ ー で 予想 外 な こと が た び ぴ び た び 
起こ り ま す が 、 そ れ は 普通 の こと で す 。 
何 年 も の 開発 経験 が あっ て も プロ グラ ミン 
グ の ミス は 起こ り ま す 。 逆 に 言う と プロ で も 
一 発 で コー ド が 完全 に 思っ た と お り に 動作 
する と き は 宝くじ に で も 当たっ た 気分 に な り 
ます 


スルメ スル K ト スルメ メル メ メル K メル メ スル K メ メト ルミ メル ミ メル ミ メル K ミ スルメ メメ スルメ メル K ム メル ミ メ メル メメ ミ メス ルミ メ メル メ ミル K メ メル ミ 1) 
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enchant.js の 基礎 


enchant.js を 使っ て 
まず は 文字 や 画像 を 
表示 し て み ま し ょ う 


し 3 「 [imdeoehet I | ]index.html x ER FM | 


index.heml 
放 | file:///Users/robert/Desktop/pirateTactics/enchant.js-builds-0.8.1/qame/ Intro/02 de html ss| 


スプ ライ ト 機 能 を 使う 
と 画像 を 読み 込む こと 


QA BI 1 Decneork Sources Timeline Profiles Resources Audits Console 


YFE | Styles | Computee Event Listene: 
上 ms element. style { 

<head> Rd: し は 4 
Y <body bgc cplors gr ys Lim os absotutes | 
v <div id=! tage' Ha ition solute; font-size: 12px; be | 
Cuebkit-tap-nightighte colo i 1 8, し width: 0 時 ight: } Es | 
293px; a | 
PO sty la="positioni absolute; overflow: hidden; -webkit Inherited from di | 
transform-origin: 9DX 9px; width: 960px; height: 5646px; webkit- Style Attribute { | 
transform: scale(9.4578125);"></Giv> wositions absotgties | 
¥<div style="position: absolute; overflow: hidden; —webkit Fanteatae 3 | 

transform-origin: Qpx Qpx; a 969px; height: 640px; hkit= = 
ds scale(9。 4578125) ;" 0 ; | 
henghter64" style="position: absotute: top: width: 439px; | 
NN NE Opx; "> height;: #293px | 
+ | 

Fenchant-stage div EEE Find In Styles 


indeXlhtml< 表 示 の だ め の AM 

た 考 が の ワ ロ グ クラ を 読み 込み ま ・ 

ショ ウジ パ が 本 体 は main ほ に 書 書き ます 』 
a 


ーーーー オ ーー 


A 


本 章 で 勉強 する こと 


@ 最低 限 の enchant.js の サン プル で 、 基 本 @ 文字 の 表示 は ラベ ル を 使う 。 ラ ベル を 貼っ 
を 勉強 し て いこ う て みよ う 


@index.html と main.js を 用 意 @ いよ いよ キャ ラク ター が 画面 に 登場 


eenchant.jS の 読み 込み 方 と 動作 の 確認 方 @ 外部 の ファ イル を 読み 込ん を で 、 ス プラ イト 
法 を 学 ぼ う を 使っ て みよ う 


で は 最初 に enchant.js の 実行 で きる 最低 限 の サン プル を 作り な が ら 基 礎 を 身 に つけ て いき まし ょ よう 。 
まず 本 章 用 の サン プル コー ド の フォ ル タ ダ を 開き ます 。 ア ー カ イブ を 展開 し た フォ ル ダ か ら 、enchant. 
jsS-builds-0.8.2-b 一 game 一 intro っ 00 と 辿っ て フォ ル ダ を 開い て くだ さい 。 


enchant.jS の 基礎 


今回 の よう に enchant.js で 小 規模 な ゲー ム を 作る 場合 、 プ ロジ ェクト (enchantjsS だ と フォ ル ダ と フ 
ァイル だ け で 構成 され ます ) は 基本 的 に と て も シン プル で す 。 画 像 ファ イル や サウ ンド を 除け ば ほとん ど 
2 つの ファ イル で 構成 され て いま す 。 

サン プ ブル フォ ル ダ に は その 2 つの ファ イル が あり ます 。 index.html と mainjs で す 。 そ れ ぞ れ に つい て 
見 て みる こと に し まし ょ う 。 


Date Modified 5 テモ Kind 


fF index.html Jun 4, 2014, 5:32 PM 546 bytes HTML 
a PaIn.js Jun 9. 2014, 11:28 AM 3 KB JavaSCrl ロ t SCrint 


! Index.html 


= =! = = = = = | 一 一 | 一 一 | 一 一 | 一 = = = = = = = = = = = = = = = ] 一 | ニニ ニニ = = = = = = = = = = 


ひと づつ 目 の index.html は も の すご く シ ンプ ブル な HTML で 書か れ た Web ペ ベー ジ で す 。enchant.js で 作ら 
れ た ゲー ム を 表示 する 領域 を 定義 し て いる だ け で す 。 

今回 の ゲー ム く らい で あれ ば 、 こ の よう な シン プル な HTML で 十分 で す 。 ま た 、 こ の よう な 単純 な 
HTML の タグ で enchant.js が ブラ ウザ 中 に 表示 で きる と いう こと は 、 ほ か の Web サ イト の HTML ベ ペー ジ 
の 一 部 と し て ゲー ム を 組み 込む の も 容易 だ と いう こと で す 。 た と えば 、 自 分 の ホー ムペ ー ジ が あれ ば 、 そ 
の ページ の 中 で 作っ た ゲー ム を 動か すこ と も で きま す 。 

で は index.html の 中 身 を 確認 し て み ま し ょ よう 。 


y Index.html 


く !DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="x-ua-compatible" content="IE=Edge"> 
<meta name="viewport" content="width=device-width, user-scalable=no"> 
<script, type="text/javascript" sro="../../../,./build/enchant.ja'></script> 
<script type='"text/javascript" src="main.js"></script> 
<style type='"text/css"> 
body { 
margin: 0; 


padding: 0: 
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} 
</style> 
</head> 
<body bgcolor="grey"> 
</body> 
</html> 


非常 に 短い で す が 、 こ の 中 に は いろ いろ な 要素 が 含ま れ て いま す 。 


HTML の 最新 バー ジョ ン で ある 『 
この 本 で は ゲー ム を 作る こと に 集中 し ます が 、HTML HTMLS の 解説 書 で す 
の 知識 を 身 に つけ る と 、enchant.js と うま く 組 み 合わ 「 A 
せ た さ ら に 面白 い ゲ ー ム が 作れ る か も し れ ま せん 。 興 SE 
味 が あれ ば HTML5 の 解説 書 で 勉強 し て みる の も いい 
2 「 
[HTML5 の 絵本 」 
(株 ) アン ク 著 、 翔 泳社 、ISBN978-4-7981-2617-3 


この まま だ と ちょ っ と 分 か が り に くい と 思い ます の で 、 い つっ た ん 中 映 を 無視 し て 骨組 み だ け を 見 て み ま し 
よう 。index.html を 分 解 し て 主要 な HTML の タグ だ け に する と 、 次 の よう に な り ま す 。 


< く !DOCTYPE html> 
<html> 

<head> 

中 賠 

</head> 

<body bgcolor="grey"> 
</body> 

</html> 


HTML5 の 形式 に 則っ て 基本 的 な タグ だ けが 書か れ て いま す 。 これ は enchant.js の アプ リケーション と 
いう より は 、HTML5 の Web ベ ペー ジ の 基本 的 な 形 で す 。 ま す 先 頭 行 で HTML5 の ペー ジ で ある こと が 宣言 
され 、<head> ~ </heaqg> タ タグ の あい だ で 、enchantjs に 関す る いろ いろ な 設定 が 書か の れ ま す 。<body 
bgco1or="grey"> タ グ と </bogy> タ グ に 挟ま れ た 部 分 は 本 来 な ら ペ ー ジ の 本 文 に 相当 する も の が 書か 
れ ま す が 、 ゲ ー ム の 画面 は enchant.js が 表示 し ます の で 何 も 書 か の れ て いま せん 。btbgco1or=" grey" で 背 


(スルメ スルメ メル ミ メル トミ スルメ スル メ コル トミ スルメ メス ルミ コル メル メル K ミ メス ルミ スルメ コト ルミ メ メル K メ メル ミ メメ スル ミ スル K メ メル ミ スルメ 1) 


enchant.jS の 基礎 


景 の 色 を グレ ー に 指定 し ます 。 
で は も うい ち ど 、 元 の ソー ス を 解読 し な が ら 今度 は <heaa> ~ </heaa> タ グ の あい だ で 書か れ て いる 
こと を 確認 し まし ょ う 。 


ここ で は テキ スト の 文字 コー ド を 
UTF-8 に 設定 し て いま す Internet Explorer と の 


互換 性 を 保つ た め の 指 定 で す 


< く head> 
<meta charset="UTF-8"> 


これ で 画面 の 比率 を 
固定 し ます 


<meta name="viewport" content="width=device-width, user-scalable=no"> 


<meta http-equiv="x-ua-compatible" content="IE=Edge"> 


<script type='" text/javascript" srcec="../../../../build/enchant.js"></script> 
<script type='"text/javascript" src="main.js"></script> 


<style type='"text/css"> 


enchant.js フ レー ム ワ ー ク 
body { これ は ゲー ム の コー ド の 読み 込み 
ai main.js の 配置 で す 
padding: 0; 
} 
</style> 


</head> 


一 番 大 切な ボイン ト は 次 の 2 行 だ け で す 。 そ れ 以 外 に 関し て は 、 ゲ ー ム の 作成 に は 直接 関わ ら な い 部 分 
で す の で 、 お まじ な い だ と 思っ て 書い て お け ば か まい ませ ん (詳細 な 意味 に つい て は 時 間 が ある と き に 調 
べ て いた だ いて も よい で し ょ う )。 


<script type="text/javascript" src=",,/../../..,/build/enchant.js"></script> 
<script type='"text/javascript" src="main.]s"></script> 


1 行 目 は enchant.js の 読み 込み を 指定 し て いま す 。 src="../../../build/../enchant.js" で 
enchant.js 本 体 の 場所 を 示し 、type=" text/javascript" で JavaScript の ソー ス で ある こと を 示し 
て いま す 。../ の 部 分 は 今 の (index.html の ある ) フォ ル ダ の 1 つ 上 を 示し ます 。../../../../ 
bui1d/enchan も .js と あり ます の で 、「index.html の ある フォ ル ダ の 4 つ 上 の build 以 下 に ある enchant. 
js と いう ファ イル を 読み 込む ] と いう 指示 に な る わけ で す (本 当 に そこ に ファ イル が あり ます の で 確認 し 
て くだ さい )。 

これ で enohant.js が 利用 可能 に な り ま す 。 [新しい ゲー ム を 作っ て 動か し て みて も 何 も 起 こら な い 」 と 
いう よう な 場合 は 、 デ バッ グ ツ ー ル を 開い て みる か 、 まず は こち ら の 指定 を 確認 し て みる と よい で し ょ う 。 
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今後 別 の ゲー ム を 作る こと に な っ た ら 、 違 う フ ォ ル タ 構 成 を 採用 する か も し れ ま せん 。 そ の と き は この 部 
分 の 指定 を 変更 し ます 。 

その 次 の 1 行 は これ か ら 書 く ゲ ー ム 本 体 の メイ ンプ ログ ラム main.js の 読み 込み を 指定 し ます 。 そ れ で 
は 、main.js の 内 容 に つい て 次 に 見 て いき まし ょ う 。 


1 & 【】 
| main.js 
em rar i Pe (ParT Te Parr DEP 5 (EE FE] la (i | Ta Pe [Ea FE [EE | Fe | Pra Pe] [eS Fe Td Ti a ET [i To mr fw [a Ee [EN | 


main.js を 開き まし ょ う 。 こ こ に は ゲー ム の コー ド が 書か の れ て いま す が 、 ま だ 初め の 初め で す の で ご く 
基本 的 な こと し か が 書か の れ て いま せん 。 


マ main.jS 


enchant.js を 使う 前 に フレ ー ム ワー ク 
を 有効 に する た め に 必要 な 処理 


enchant(); 


ペー ジ が ロー ド さ れ た 際 に 実行 され る 関数 。 
すべ て の 処理 は ペー ジ が ロー ド さ れ て か ら 行 
うた め 、window.onload の 中 で 実行 する 。 


特に new Core(); は 、<body> タグ が 存 
在 し な いと エラ ー に な る の で 注意 


window.onload = function(){ 


Core オブ ジェ クト を 作成 する 。 
画面 の 大 き さ は 960 ピ クセ ル x640 ピ クセ ル に 設定 する 


var game = new Core(960, 640); この 大 き さ だ と モバ イル 端末 で も 遊べ ます 


ゲー ム に シー ン を 追加 


var sceneGameMain = new Scene(); 


game .pushScene(sceneGameMain) ; 


game.start(); 
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(は MX スルメ スルメ メル メ ミ メル トメ スルメ メル ミ スルメ メル ミ メル トミ メル K ミ メト ルミ メ メメ ルミ メス ルミ メル ルミ メル ミ メ メス ルミ メス ルミ スル メ メス ルミ メル ミ スネ 1) 


enchant.jS の 基礎 


最初 は enchant() と いう 初期 化 の た め の 関 数 を 実行 し ます 。enchant.js を 使う と き は 、 こ の 命令 を い 
つも 実行 させ ます 。 実行 する と 、 プ ログ ラム を 動か す た め の enchant.js の さま ざま な 準備 が 整う 仕組 み 
に な っ て いま す 。 

次 は イベ ント ハン ドラ を 書い て いま す 。 イ ベン ト と は 、 ブ ログ ラム に 通知 され る 外部 の アク ショ ン の ご 
と で す 。 ち ょ っ と 抽象 的 な 言い 方 に な つて し まい まし た が 、 ブ ラウ ザ ゲ ー ム で あれ ば 、「Web ベ ペー ジ が 読 
み 込 まれ た 」「 キ ー が 押さ れ た 」「 ボ タン が クリ ッ ク さ れ た 」 な どの 出来 事 が イベ ント と し て プ ブログ ラム に 
通知 され ます 。 こ れ ら の イベ ント が 発生 し た ら 、 そ の 時 に 行う 処理 を プロ グラ ミン グ し ます 。「 〇 〇 が 起 
きた ら 、 メ する 」 と いう ふう に ブ プログ ラム を 書く ほう が ブラ ウザ の アプ リケーション や 、 ゲ ー ム の 場合 
は 便利 で す 。 こ うい っ た ブ プログ ラミ ング の 仕組 み を イベ ント ルー プ 型 と 呼ん を で いま す 。 こ こ に は 
window.on1oad と いう イベ ント ハン ドラ が あり ます 。 winaowy は ブラ ウザ の Web ペ ー ジ を 示し て いま す 。 
ブラ ウザ が ページ を 読み 込む (ロー ド す る ) と 、on1oaa と いう イベ ント が 発生 し ます 。 こ の イベ ント が 
発生 し て は じ め て enchant.js が 安全 に 使え ます 。 


」 onload イ ベン ト の 前 に enchant. / / li フレ ー ム ワー ク に は 
js の 機能 を 使っ て し まう と 、 そ の 。 半 析 ご 得 SE 
部 分 が 実行 され る タイ ミン グ は 還 ド それ に 従っ て プロ グラ ム し て 


いっ て ぐだ さい 。 


ブラ ウザ 任せ に な っ て し まい ます 。 コー ド を 書 
いて も 、 動 いた り 、 動 か な か っ た り し ます の で 、 
か な ら す onload イ ベン ト の あと に 書く よう に し 
BE 


onload イ ベン ト ハ ンド ラ で は 、fFfunction() と 書い て 、 そ の 後ろ の { ~ }) の あい だ に その イベ ント で 
実行 させ た いこ と を 書い て いき ます 。 一 番 最初 に する こと は cors と いう オブ ジェ クト を 作る こと で す 。 
Core オブジェ クト は ゲー ム ブ プロ グラ ム の 本 体 を 示す オブ ジェ クト で す 。 

var game = new Core(960, 640) の 部 分 で は 、new Core(960, 640) で Core を 作り 、 そ れ に 
games と いう 名 前 を 付け て いま す 。 引 数 で ゲー ム の 画面 サイ ズ を 決め て いま す 。 実際 の 画面 は ブラ ウザ の 
表示 サイ ズ に よっ て 変わ り ま す が 、 画 面 の 大 き さ を この よう に 定義 し て お け ば 、 サ イズ 変更 は フレ ー ム ワ 
ー ク が 代り に や っ て くれ る の で と て も 便利 で す ! 

画面 を 960X640 に し た 理由 は 、 そ の 大 き さ で あれ ば 多く の スマ ー ト フォ ン や タブ レッ ト で 問題 な く 表 
示 で きる か ら で す 。 

これ で ゲー ム の 画面 が で きま し た 。 そ の 上 に シー ン (Scene) を 作っ て 、pushScene () と いう 命令 で 
ゲー ム の 画面 に 表示 し て いま す 。 シ ー ン は ゲー ム の 舞台 を 意味 し て いま す 。 今 回 は scenseGamsMain と い 
う シ ー ン を 作り まし た 。 こ の 舞台 の 上 に ゲー ム の さま ざま な 出来 事 が 起こ と こり ます 。 た だ し 、pushsoene 
を 実行 し な いと シー ン は ゲー ム の 画面 に は 現れ ませ ん 。 複数 の シー ン を 作っ て pushscene () で 画面 を 切 
り 替 える こと も 可能 で す 。 
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フレ ー ム ワー ク を 読み 込み 、 ベ ペー ジグ ゲー ムシ ー ン が で きた ら game . start( ) を 実行 し ます 。 これ 
で 今 作 っ つて いる ゲー ム が 実行 され ます 。 


メイ ン ル ー フ は な ぐ な つっ つ で じ ま つ た の 22。 

Web ブ ラウ ザ は 基本 的 に 非同期 の シス テム で す 。 非同期 と は (大 ま か に いえ ば ) 時 
間 の 流れ の 概念 が な く 、 順 序 だ っ た 動作 を し な い シ ステ ム で す 。 そこ で 、 ブ ラウ ザ で 
プロ グラ ム を 動か す に は 、 説 明 し た よう な イベ ント の や り 取 り を 利用 し ます 。「 〇 〇 と 
いう イベ ント が 起 っ た ら 、 メメ を 実行 し よう | と いう 風 に プロ グラ ム を 書く の で す 。 
これ は イベ ント ルー プ (event loop) と いう プロ グラ ム の 作り 方 で す 。 実際 、 今 の 時 
代 は ブラ ウザ 以外 の ゲー ム フ レ ー ム ワー ク や エン ジン も ほとん ど が イベ ント ルー プ で 
動作 し て いま す 。 

大 昔 (と いっ て を 実際 は 数 年 前 で す が )、 ゲ ー ム を 作る と き に は メイ ン ル ー プ (main 
loop) と いう も の が あり まし た 。 メイ ン ル ー プ の イメ ー ジ は 次 の サン プル の よう な 感じ で 
す (この コー ド は 実際 に は 動き ませ ん 、 た ん な る イメ ー ジ の コー ド で す )。 yhi1s な どの 
繰り 返し 命令 を 使っ て ゲー ム が 終了 する まで 、 で る ぐる 処理 を 回 す よ うに な っ て いま す 。 


| Eunotion main() { メイ ン ル ー プ を 定義 
initGame () ゲー ム に 必要 な 初期 化 処理 を 行い ます 
var endGame = false; ゲー ム が 終わ る まで 無限 に ルー プ し ます 


while (endGame == false) { 


updateGame () ; ゲー ム の ロジ ッ ク 処 理 を 更新 し ます 


FenderGame () : ゲー ム の 描画 処理 を 更新 し ます 
endGame = shou1qdGameEnd () : ゲー ム の 終了 条件 を チェ ッ ク を し ます 


quitGame () ; ゲー ム が 終了 する の で 終了 処理 な ど を し て プロ グラ ム を 終わ り ま す 


exit(); 


} 


た だ し 、 近 年 この よう な メイ ン ル ー プ 式 の ゲー ム の 書き 方 は 殆ど 見 な く な り ま し た 。 筆 
者 が ゲー ム 開 発 で 最後 に メイ ン ル ー プ を 書い た の は 、 た ぶん 7 年 くら い 前 だ と 思い ます 。 
その 意味 で は 、 こ れ か ら も メイ ン ル ー プ 式 の ゲー ム フ レ ー ム ワー ク と 出会う こと は な 
いか も し れ ま せん 。 し ば らく は イベ ント ルー プ 式 フレ ー ム ワー ク の 時 代 が 続く と 思 
析 ま すず 「 

今 で も 、 フ レー ム ワ ー ク や ブラ ウザ 、 あ る い は OS の 奥深 く で は 、 上 の よう な メイ ン 
ルー プ が 淡々 と 仕事 を し て いる と 思い ます 。 で も 、 か な り 低 レベ ル な プロ グラ ミン グ 
を し な いか ぎり 、 現 代 で は メイ ン ル ー プ に 出会う こと は な いで し ょ う 。 
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enchant.jS の 基礎 


、 
| a ョ ぶ Na = ~» 
( が | テ / \ ツ クソ ツー ル で 人 確認 し て みよ う 
で に FE i EE = EE 5 = に こ 3 = = EE: = EE EE = ££ i FE EE 5! EE = SE EE = 司 二 人 寺 還 
ここ まで 作っ て きた の は 、 こ れ か ら ゲ ー ム を 作る うえ で の 基本 と な る 構成 で す 。 ま だ な に も 表示 され て 
いま せん が 、 庫 で は フレ ー ム ワー ク や ゲー ム が ちゃ ん と 稼動 し て いま す 。 


1 index.ntmi x い ( 
C fe:///Users/robert/ Dropbox/Public/pirateTactics/enchant.js-builds-0.8.1/game/intro/00/index.html yz 三 


今 の と ころ 、 ゲ ー ム の 画面 に は 何 も あ り ま せん 。 見た目 に は 寂し い の で 、 ま ず デ バッ グ ツ ー ル を 開い て 
確認 を し まし ょ う 。Macintosh の 場合 は [Command] + [Option] 二 旧 キー、Windows の と き は [F12] 
キー で す 。 


@ oO 「 [ndex.htmi 


' EE = ュー i と ーー Sa = = ーー 内 
を と fi:///Users/robert/Dropbox/Public/pirateTactics/enchantJs-builds-0.8.1/game/intro/00/index.html wy 三 


Q Elements Network Sources Timeline Profiles Resources Audits LConsole] 
Q 宮 <top frame> 
> 


コン ソー ル に は 見 事 に 何 も 出 て いな い の で エラ ー も な いみ た いで す 。 で も 、 エ ラー が な いか ら と いっ て 
ゲー ム が ちゃ ん と 動い て いる と は 限り ませ ん 。 ほ か に 確認 の 手段 は な い の で し ょ うか ? 

実際 に ゲー ム が 動い て いる 様子 は デバ ッ グ ツー ル の 「Elements] の タブ で 確認 で きま す 。 

| Elements] を よく 見 る と 、 た だ の index.html に は な か っ た 部 分 が 増え て いま す 。 
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<div i1d="enchant-stage" style="position: absolute; font-size: 12px; -webkit- 


tap-highlight-color: rgba(0, 0, 0, 0); width: 805px; height: 537px;"> 財 </div> 


まだ 未熟 で 何 も で き て いま せん が 、 こ れ は 確か に 今 動い て いる ゲー ム を 示し て いま す 。 

<qiv> タ グ で 囲ま れ て いる の は 、enchant.js が 作っ た ゲー ム の 領域 で 、 ゲ ー ム の 背景 や キャ ラク ター 
な ど は 全部 この 部 分 に 表示 され ます 。 

デバ ッ グ ツー ル 上 の この コー ド を クリ ッ ク を する と 、Web ベ ペー ジ 上 の 該当 する 部 分 も 青く 光っ て 表示 
され ます (光る の は ブラ ウザ の 基本 機能 で す 、enchantjs や ゲー ム の 機能 で は あり ませ ん )。 


@ 0 0 / indexnem 


た へ file:///Users/robert/Dropbox/Public/pirateTactics /enchant.js-builds-0.8.1/game/intro/{00/in... 


div\enchant=stage 95px «x 537px 


Q、 FElements{ Network Sources Timeline Profiles Resources Audits Console = 意 
「・ | sles | Computed Event Listeners »% 


F<html> 

b <heads.</head> element. style { 

軍 <body bgcolor="grey"> positipns' absolute; 
Tc<div id="enchant-stage” style="position: absolute; font-size: 12px; TOn tsLze: 12px; 上 
webkit-tap-highlight-color: rgba(9。 8, @。 @): width= 895px: height: Eh rgba(6。 @, 6, 
537px; "> 。 , 

<Giv stylem"'position: absolute; overflow: hidden; -webkit- し 
transform-origin;: Qpx Opx; width: 969px: height: 640px; =webKitー } 
transform: scale(0.8390625) : "></divs 
<div style="position: absolute; overflow: hidden; -webkit- div { user agent stylesheet 
transform-origin: Bpx Bpx; width: 9686px: height: 648px; -webkit— display: block; 
transform: scale(0.83990625) ; "></div> } 
</div> 
マ ア bod > 
トイ Ji 1 1 と う 


height:e 537px; 


POsition 


html body LE hat tit 


お 疲れ 様 で す ! ここ まで は よく で きま し た 。 こ れ か ら は が ん が ん ゲー ム の 開発 に 入っ て いき まし ょ う 。 
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enchant.jS の 基礎 


Z| enchant.js で Hello World 


トー オーー トー コト ーッ に ーー ーー リー キーーー ト ーー に ーー トーーー ド ニー FE EE EE EB EE EE ££ EE ーー ーー ニオ ーー ーー 


この 状態 だ と 面白 く な い の で 今度 は 何 か 文 字 を 表示 させ て み ま し ょ う 。 第 5 章 で も 試し た よう に 最初 は 
画面 に 「Hello World] の 文字 を 出し て み ま し ょ う 。 次 の よう に さき ほど の ソー スコ ー ド の var 
sceneGameMain = new Soene () : の 直後 に コー ド を 追加 し ます (これ か ら 使 う コ ー ド は intro 一 01 
に あり ます )。 


ラベ ル を 作り ます 
var SoeneGameMan = new Soene() 


var label = new Label("Hello World"); 


ラベ ル の 座標 を 設 
label.x = 200: 


label.y = 100; 
sceneGameMain.addChild(label); 


game .pushScene(sceneGameMain) ; 


enchant.js で 文字 を 表示 する た め の オ ブ ジ ェクト は rabs1 で す 。「Hello World」 の 文字 を 作成 し て か 
ら 、 座 標 x=200 と y=100 を 決め て aaachi1a() で 配置 し ます 。 


[Hello World] は ちゃ ん と 表示 さ 
れ た よう で す 。1abes1 オ ブ ジ ェクト に 
は 次 の 要素 で (文字 の 色 や フォ ント を ) 
指定 する こと も で きま す (この 本 は 
enchant.js の 解説 が メイ ン で は あり 
ませ ん の で 、enchant.js の 機能 の 詳 
細 に つい て は Web サ イト や ほか の 書 
籍 の 解説 を 参考 に し て くだ さい )。 


| Index.html 


を (ざさ [ file:///Users/robert/Dropbox/Public/pirateTactics 


マ 表 7-1 label オ ブ ジ ェクト に 設定 で きる 属性 


属性 説明 
color 文字 色 の 指定 
font フォ ント の 指定 
text 表示 する テキ スト 
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文字 は 無事 に 出 ま し た が 、 そ の 仕組 み を も う 少 し 説明 し て お きま し ょ う 。 デ バッ グ クツ ー ル で ゲー ム を 確 
認 し て み ま す 。 


| e oO 「[ ロ imdex.heml 


を の CO ロロ fe://Users/robert/Dropbox/Public/pirateTactics/enchant.js-builds -0.8.1/game/intro/01 ndex.html 


canvas 968px x 649px 


© Elements{ Network Sources Timeline Profiles Resources Audits Console 


2= 


〒 <htm し > 
bb <head>..</head> 
Vebody bgcolore''grey"> 
vc<div id="enchant-stage" style="position: absolute; font-size: 12px; -webkit- て ap-hightioht-cotor: 
rgba( 6。 80, 9。 B}; width: 997px; height: 655pxi"> 


| styles | Computed Event Listeners » 
element.style { 

position: absolute; 

top: Bpxz 

left: Bpx; 


<div styles"position: absolute; overflow: hidden: -webkit-transform-origin: Bpx Spx; width: 958px; 
height: 649pXi -webkit-transform: sealell,.9399625); ">e/divs Inherited from div\enchant-staqe 
vediv styler"position: absolute; overflow: hiddeni -webkit-transform-origin: @px 6px; width: 968px; Style Attribute { 
height: 649px: -webkit-transform: scale({1.0398625);"> cl ia 
<cCgnvas width="960° heiqght="64@" style="position: absotute: top: ー ョ フロン 
</d ュ yz 
で /d ュ ミッ テ 
</{body> 
で /htmts 


PO5 - さ ュ DTI に ー 
font-size: 12pxs 
ー < ロメ ta ローhkGhHL sg ドド エーC ロ 1 ロ TI cobaltlM, 還 。 


html body div#enchant-stage div 邊 eTnr Find in Styles 


黒い 三角 の マー ク を クリ ッ ク し て いく と 、 い ろ い ろ な 有 要素 が 表示 され ます 。 ご この 中 に 、| canvas」 と 
いう 要素 が 追加 され て いま し た 。 画 面 に 何 か を 表示 させ る と 、 目 に は 見 えま せん が 、 ご の canvas と いう 
要素 が ブラ ウザ 上 に 配置 され ます 。 


<canvas width="960" height="640" style="position: absolute; top: Opx; left: 
Opx; "></canvas> 


canvas は enchant.js の 機能 で は あり ませ ん 。HTML5 に 含ま れる 要素 の ひと つ で す 。canvas は 比較 
的 最近 登場 し た 機能 で 、HTML5 以 前 に は あり ませ ん で し た 。 

canvas は グラ フィ ッ ク の 描画 が と て も 高速 で 、 今 時 の ほとん どの 2D ブ プラ ウザ ゲー ム は canvas の 恩恵 
に あず か っ て いま す 。canvas (と HTML5) の お か げ で 、 ブ ラウ ザ で ちゃ ん と し た 2D ゲ ー ム が 作れ る よ 
うに な っ て きた の で す 。 
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enchant.jS の 基礎 


に 
| 2 a 
(た | スプ ライ ト を 表示 
人 ii 
[Hello World] を クリ ア し た と ころ で 、canvas と いう 要素 の 存在 が 分 か り ま し た 。 せ っ か く 2D の ゲ 
ー ム を 作る の で すか ら 、canvas の 上 に 絵 を 出し まし ょ う 。 ゲ ー ム で は 画面 上 に 表示 し て いる キャ ラク タ 
ー な どの 絵 を スプ ライ ト (Sprite) と 呼び ます 。 ス プラ イト に は 画像 を 画面 に 表示 させ 、 動 か し た り 、 消 
し た り で きる 仕組 み が 用 意 さ れ て いま す 。enchantjs で は スプ ライ ト を 簡単 に 利用 する こと が で きま す 
(これ か ら 使 う コ ー ド は intro ~ 02 に あり ます )。 
た だ し 、 読 み 込む 画像 は ブラ ウザ の 外部 に 置か れ て いま す の で 、 そ れ を ゲー ム の 中 に 読み 込む 必要 が あ 
り ま す 。 そ こ で も う 一 度 イ ベン ト の 仕組 み を 使っ て み ま し ょ う (ソー スコ ー ド の 全体 は intro ~ 02 の 
main.js で す )。 


window.onload = function(){ 


4 _ 、 
preload で 画像 ファ イル を 読み 込む 
var SoeneGameMa1rn = 


= new Scene(); 


game ..preload("../../../resources/pirateO00.png"); 


game.onload = function(){ 
中 略 
} 


game.start(); 


最初 に 画像 の パス (ファ イル の 位置 ) を preload に 渡し ます 。 プ リロ ー ド と は ゲー ム が 始ま る 前 に 外 
部 リソー ス ( た と えば ファ イル や 音声 ) を 読み 込ん を で お く た め の 機能 で す 。 今 は 画像 1 つの 読み 込み で す が 、 
量 が 増え る と enchant.js は 読み 込み の 進捗 を バー で 表示 し て くれ ます 。 ス プラ イト の 属性 や メソ ッ ド の 
うち 主要 な も の を 紹介 し ます 。 


(メル メ メル K ミ スルメ メス ルミ メル メ メル トミ メス ルミ メル ミ メル トメ メル ミ メル トミ メル メ メル メ メル メ メルル メ メル K メ メル ミ メル K メル ミ コス ルミ メル ミ え 1) 77 


マ 表 7-2 Sprite の 主 な 属性 ノ メ ソ ッ ド 
コン スト ラク タ 説 明 
enchant. Sp ェ ュ te (width , height) スプ ライ ト の 大 き さ (縦横 ) を 指定 する 


属 性 説 明 
F ェ ame 表示 する フレ ー ム の イン デック ス 番 号 
height スプ ライ ト の 高 さ 
width スプ ライ ト の 幅 
image 表示 する 画像 
age 画面 に 表示 され て か ら 経 過 し た フレ ー ム 数 
paren Node 親 オ ブ ジ ェクト 
scene 属し て いる Scene 
x x 座標 
Y y 座 標 
メソ ッ ド 説明 
moveBy(x, y) スプ ライ ト の 移動 (相対 指定 ) 
moveTo(x, y) スプ ライ ト の 移動 (絶対 指定 ) 


外部 リソー ス の 読み 込み が 終わ る と game . onloead の イベ ント が 発生 し ます 。 最 初 は ちょ っ と 不思議 に 
思う か も し れ ま せん が 、 こ の よう に 複数 の イベ ント が 段階 的 に 呼び 出さ れる こと は よく あり ます 。 た と え 
ば 今回 は window. onlo。oad が 終わ っ て 、 所 定 の 処理 を し て 、 次 の game . on1oad の イベ ント が 発生 する ま 
で の あい だ 、 ゲ ー ム は 停止 し て いま す 。 そ の あい だ に 裏 で は フレ ー ム ワー ク が 画像 の 読み 込み 作業 を 行っ 
て いる の で す 。 

画像 の 読み 込み が 完了 する と 次 の よう に gamse . on1toaa イ ベン ト の 処理 が 実行 され ます 。 


の 
= スプ ライ ト を 作成 
game.onload = function(){ 


var sprite = new Sprite(256, 256); 
sprite.x = 200; 


sprite.y = 100; image に 画像 ファ イル を 当て は め る 


sprite.image = game.assets["../../../resources/pirateO00.png"]; 


sceneGameMain.addChild(sprite) ; 
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enchant.jS の 基礎 


game .pushSoene(soceneGameMa+1n) / 


} 


最初 に sprite() で 新しい スプ ライ ト を 作っ て いま す 。 そ し て 、 プ リロ ー ド し た 画像 を sprite の 
RI し て 設定 し て か ら 、 ゲ ー ム の メイ ン シ ー ン に 追加 し ます 。 


の 流れ は | Hello World」 と ほとん ど 同 じ で す 。 すべ て うまく? 


ィ け ば ゲー ム に 恐ろし い 海 賊 の 姿 が 現 
Me 


9 O © [] Imdexc.heml 4 [Imdex.hmml a [ Index.html 


こ 3 S RO Sources Timeline Proflles Resources Audits Console 


= 
| styles | Computed Event Listeners » 
シャ 
<head>-</head> element. style { 
¥ <body bgcolor="grey"s pasition: absolute; 
¥ <div id="enchant-stage" style="position: absolute; font-size: 12px; tapi 6pxs 


-webkit-tap-hiqhtight-cotor: rqbald, 9, 9, @): width: 439px: heiqht: left: 9px: 
Ln } 
293px; "> 


«<div style="position: absolute; cverflow: nidden;s -webkit— 
transform-origin: Qpx の px』 width: 969px』 height: 6490xs 


Inherited from div¢enchant-stage 

; webkit- i Attribute { 
transform: scaue(9.457B125 ) "></div> i 時 
マ <div style="position: absolute; overflow: hiddenz -webkit- font- sizes 12px; 
transform-origin: Qpx Bpx; width: 968px: height: 648px; -webkit— EEBEcnihitiaEt=Gntt 
transform: scalely.4578125); "> 

«canvas width="969" height="640" style="position: absolute; top: idti:k 439ax: 

Bpx; left: Bpx;™>» e203 
</ div> 
bady div#enchant-stage div ETH 


Ar rqbald, bb, 日 。 


Find in Styles 


この 本 で は 今 か の ら 作 る ゲー ム に 必要 な enchant.js の 知識 を 説明 し て いき ます 。 た だ し 、enchant.js に 


は 、 こ の 本 で は 使わ な い 機 能 と プラ グイ ン も まだ まだ 沢山 あり ます の で さら に 理解 を 進め た い 人 は 
enchant.js の 解説 書 な ど を 参考 に し て くだ さい 。 


「 ゼ ロ か ら は じ め る enchant.js 入 門 」 


布 留 川 英 一 / 伏 見 遼 平 / 田 中 詠 著 、 ア スキ ー・ メ ディ アワ ー ク ス 、ISBN978-4-0488-6258-5 


(は 人 K メス ルミ スル トミ メル ミ メル K ミコ ルミ メス ルミ メス ルミ メル トミ メル K メス ルミ メル トミ メ コル トミ スルメ スル トミ メス ルミ メ メル ミ メル K ミル k メ メル K メス ルミ メ 【) 79 


。 固 較 四国 還 還 安 Erm 。 中 
恒男 本屋 


スプ ライ ト は 画面 の 中 

に 重ね て 表示 で きま す 。 

これ を レイ ヤー と 呼び | | | トド | 
| 民 i a © 地図 (map) 


CC 


ヒー ニン 


8 


ご 

ニー が の マシ ジン は G つ の レイ ョ 記 王 xc で さき 
いま す 記 クニ パ の 四 枠 ] 還 地図 CWC 
へり 生 で 9 量 の は 間 通 常 は アレ イン の 目 


/ 本 章 で 勉強 する こと 


・ ま ず は ゲー ム の 舞台 と な る フィ ー ル ド を ・ さ ら に タッ チイ ベン ト を 作っ て みよ う 


202207 ・ タ ッ チ レ し た 箇所 の 座標 を 調べ て 、 通 行 で 
・ 委 地図 、 マ ッ プ の 3 つの レイ ヤー を 重 | きる か で き な いか わか る 仕組 み を 作り ま 


・ 部 品 を クラ ス と し て 作る こと で 、 ブ ログ | ・ マ ッ プ の デー タ か ら 通 行 の 可否 を 判断 で 
ラミ ング の 見 通し を 良く し よう きる デー タ を 生成 し て みよ う 


開発 し た い ゲ ー ム に 必要 な 基礎 知識 の 説明 と フレ ー ム ワー ク の 準備 が で きま し た の で 、 こ れ か ら は 本 編 
の ゲー ム 開 発 に 入り まし ょ う 。 

まず 、 ゲ ー ム に 対し て プレ イヤ ー が 何 か を イン プット (操作 ) を する と アウ ト プ ッ ト (結果 ) が 画面 に 
現れ る よう に し て み ま し ょ う 。 今回 の ゲー ム で あれ ば 最初 は フィ ー ル ド ( 海 や 陸地 の 背景 ) を 描画 し 、 タ 


80 


フィ ー ル ド を 作ろ う 


ッ チ イベ ント を 処理 する よう に し ます 。 ae we 


こ に 人 ce | 中 Wie://UsersroberVDocume nts/Pirate S/Code/pir oe hant.js-bullds-0.8.2-b/game/Pi.… ww 三 幅 
これ か ら 本 書 で 使う コー ド は すべ て Desktop 本 
ー enchant.js-builds-0.8.2-b 一 game 一 pira 1. Sample 14 


tes の 下 の 各 章 の フォ ル ダ 内 に あり ます 。 確認 を サン ブル を 実行 ゲー ム を 表示 し ます 


mainjs を 見 る : コー ド を 表示 し ます 
便利 に する た め enchant.js-builds-0.8.2-b 一 > Sample 15 
game 一 pirates 一 index.html に 各 サ ンプ ブル へ 
main js を 見 る : コー ド を 表示 し ます 
の リン ク を 用 意 し まし た 。 詳 し く 見 た いと き は そ 第 1 2 
ちら を 参照 し な が ら 確 認 し て くだ さい 。 Damp 16 
サン プル を 実行 : ゲー ム を 表示 し ます 
mainjs を 見 る : コー ド を 表示 し ます 
2. Sample 17 


サン プル を 実行 : ゲー ム を 表示 し ます 


_ 
! 。 
( が | フィ ー ル ド の 構成 
ag = = 5 = Ta EE FT| [5 TE [= = (= Tr [| = = pa = 
最終 的 に は 次 の イメ ー ジ の よう な フィ ー ル ド を 完成 させ まし ょ う 。 マ ス 目 に 沿っ て アイ コン を 並べ た タ 
イプ も あり ます が 、 今 回 は 見 た 目 を 重視 し て 地図 の 絵 を 表示 し 、 そ の 上 に マス 目 を 重ね ます 。 ゲ ー ム の 仕 


チー ム で 作る と き は と 
ゲー ム を 作る と き は 、 開 発 チー ム や 作り た い ゲ ー ム に 合わ せ て 、 具 体 的 な 開発 手順 


が 変わ り ます 。 今 回 の 本 で 紹介 し て いる 開発 の 手順 は お も に 一 人 で 作る と き に 適し た 

| 順番 で す 。 

も し チー ム で 作る な ら 、 参 加 者 が で きる 限り 効率 良く 開発 を 進め られ る 体制 に する 必 
要 が あり ます 。 た と えば 、 ゲ ー ム の グラ フィ ッ ク を 先 に 進め る な ら 、 最 初 は 仮 で も よ 
| い の で ゲー ム 画 面 を 描画 する 部 分 を 作っ て お き 、 作 業 や テス ト を 進め て も ら う よう に 

し た ほう が よい で し ょ う 。 ほか に も 、 


・ ゲ ー ム の ソー スコ ー ド を 共有 し て 管理 する シス テム 

・ 進 行状 況 を 把握 する た め の コ ミュ ニケ ーション ツー ル (メー リン グリ スト な ど ) 
・ 問 題 点 な ど を 管理 し て 解決 され た か を チェ ッ ク す る シス テム (チケ ッ ト シ ステ 
ム な ど ) 


が 必要 か も し れ ま せん 。 これ ら の ツー ル に は さま ざま な も の が あり ます 。 現在 は 、 ソ 
ー ス コー ド 管 理 ツ ー ル Git と 組み 合わ せ て 利用 で きる GitHub も 人 気 が あ り ま す 。Git 
Hub に 慣れ て いる 人 も 多い の で 、 チ ー ム で 開発 する と き は 検討 し て みて も よい で し ょ 
ヴ 6 


GitHub 
http://github.com 


スルメ スル ミ メス ルミ メス ルミ メル メ メル ミ メス ルミ メス ルミ メル K メル ミ メル トミ メル メ メル メ メス ルミ メ スル K ミ メル ト k ム メル ミ メル K メル ミ ミル K メス ルミ ミ 1) 81 
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組み 上 、 内 部 的 に は マス 目 が 存在 し ます が 、 こ の マス 目 は 通常 は プレイ ヤー の 目 に は 見 えま せん 。 フ ィ ー 
ルド 上 の 駒 を 動か す と き に 見 える よう に な り ま す 。 


Db 0 0 / indesx.hml 


ec DC ME file:///Users/robert/Desktop/pirateTactics /enchant.js-builds-0.8.1/game/pirates/01/index.html zg ! 三 


画面 全体 と フィ ー ル ド の 細か い レ イア ウト は 次 の よう に 簡単 (か つ 必 要 十 分 ) な 仕様 書 に まとめ て あり 
ます 。 


10px マス の サイ ズ 


576px 
SA OPS (9x64px) 
54px 
LLL SS や 5 や 0505)00{〈〔{〔t 0 . 〔《〈w0w ぃ w〔〈W% 4#4 ぞ だ ※※ | | 
64px 832Dx 64px 


(13X64px) 
図 8-1 ゲー ム 画 面 の レイ アウ ト 


それ ぞ れ の マス は 64x64 px (ピクセル)、 ゲ ー ム フィ ー ル ド は 13x9 マ ス で す 、 あ と は フィ ー ル ド の 
枠 エ リア も 作っ て 周り に 余裕 を 持た せま し ょ う 。 特 に 枠 の 下 の 部 分 に は ボタ ン な ども いろ いろ 表示 で きる 
領域 を 用 意 し て お きま す 。 右 と 左 の 枠 は た ん に 雰囲気 作り で す が 、 将 来 的 に 自分 で ゲー ム を 拡張 し た けれ 
ば 、 そ の エリ ア に ボタ ン な ど を 作っ て も よい で し ょ よう 。 


メオ ユメ スルメ メス ルミ メス ルミ スルメ メル K コル トミ メス ルミ メル メ メル メル メル トミ メル トミ ム メル メ メル メ スルメ スルト メル メメ メル K ミ スル K ユメ ルミ ミル ミ は) 


フィ ー ル ド を 作ろ う 


Z| マッ プ を 表示 


最初 に マッ プ を スプ ライ ト と し て 表示 し ます 。 こ こ は フ ァイル 名 が pirate00 .png か ら mapfErame . 
png に 変わ っ た だ け で 、 表 示 の させ 方 は 第 7 章 の スプ ライ ト の サン プル と 同じ で す 。 


6 0 0 / [index.hml x - 1 ー 本 CS La し ( 
を うさ で 口 le:/ ア Users/robert/Desktop/pirateTactics/enchant.js-builds-0.8.1/game/pirates/00/index.html sy | 三 


1 枚 の 絵 を 貼 つ た だ け で も ちょ っ と 雰囲気 が 出 て きま し た ね 。 で も 、 こ の 最初 の ステ ッ プ は 最低 限 の プ 
ロジ ェクト 構成 、 画 像 の 位置 な どの チェ ッ ク に な っ て いま す 。 簡単 な 絵 の 描画 だ け で も 、 裏 で は いろ いろ 
な 仕組 み が 動い て いま す (新しい ゲー ム を 作る と き は 、 こ の よう な 最初 の プロ ジェ クト の 段取り で も 、 け 
っ こう ミス が ある も の で す )。 


AN 
| 
(Z| レイ ヤー 構成 
ii 
で は これ か ら は 仕様 に 従い 、 マ ッ プ を 最終 的 な 形 に も っ て いき まし ょ う 。 そ の た め に レイ ヤー (Layer) 
と いう 概念 を 説明 し ます 。 
レイ ヤー は グラ フィ ッ ク 系 の ソフ ト に よく 出 て くる の で 知っ て いる 方 も いる か も し れ ま せん 。 も と も と 
レイ ヤー と いう 言葉 は 「 重 な っ て いる 層 」 を 意味 し て いま す 。 た と えば 次 の 図 の よう な 画像 を 作る と き に 、 
空 / 背 景 プ キャ ラク ター と 手前 の エフ ェクト を レイ ヤー で 管理 する こと が よく あり ます 。 


(メル メ スル ミ メス ルミ メス ルミ メス ルミ メル トミ メス ルミ メス ルミ メル K メ メル ミ メル トミ メル メ メル メメ メル メ メル k メ メル トミ メス ルミ スル K メル ミ コミ ルミ メル ミ 1) 
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水平 線 船 人 物 (主人公) 
図 8-2 レイ ヤー 


今回 の ゲー ム の マッ プ は 次 の よう な 3 つの レイ ヤー で 構成 し た いと 思い ます (コー ド は pirates 一 
chapter 08 01 に あり ます ) 。 


1. 枠 の レイ ヤー 
2. 地図 の レイ ヤー 
3. ゲー ムロ ジッ ク 用 の マス 目 の レ イヤ ー 


枠 と 地図 の レイ ヤー は 今 ま で と 同じ スプ ライ ト で す が 、3 つ 目 の マ ス 目 の レイ ヤー は enchant.js の マッ 
プ 機 能 を 利用 し て いま す 。 ま ず 、 枠 と 背景 を 重ね て み ま し ょ よう 。 


に 0 . [ingex.htmi 


I file:///Users/robert/ Desktop/pirateTactics/enchant.js-builds-0.8. 1/ gane/pirates/01/index.html sz | 三 
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フィ ー ル ドド を 作 ろう 


main.jsS に 次 の よう に 書い て くだ さい 。 


dame.onload = function(){ 


var sceneGameMain = new Scene(); 

960x640 の スプ ライ ト を 作成 
ss 枠 の 画像 を 読み 込む 
var frame = new Sprite(960, 640); im wa 


frame.image = game.assets[mapFrame] ; 


sceneGameMain.addChild(frame) ; 
Frame)/ 画面 の 枠 を 描画 する | 


// 背景 
var background = new Sprite(64*13, 64*9) 


background.image = game.assets[mapBackground00]; 


background.x = 64; 
ーー に コ EE ーー 
background.y = 10: 同様 に 背景 も 表示 し ます 


sceneGameMain.addChild(background) ; 


気が付い た か も し れ ま せん が 、 レ イヤ ー を 表す コー ド は 特に あり ませ ん 。 レ イヤ ー は 基本 的 に 考え 方 で 
あっ て 、 命 令 で は あり ませ ん 。adgachi1la と いう 命令 で シー ン に 要素 を 加え て いく と 、 そ れ ら が レイ ヤー 
と し て 重なっ て 表示 され る の で す (た だ し 複数 の 要素 を まとめ て 管理 し た い 場 合 も ある の で 、 そ の 場合 は 
enchant.js の eroup と 言う 機能 を レイ ヤー の た 
め に 利用 し て くだ さい )。 

次 は 、 マ ス を 配置 し て み ま し ょ う 。 今 まで の ス 
プラ イト と 違っ て すこ し 変わ っ た 画像 ファ イル を 
用 意 し ます 。 


この 画像 を 見 て みる と 、1 枚 の 画像 ファ イル の 中 に 複数 の イメ ー ジ が 含ま れ て いま す 。 こ の よう な 画像 
は スプ ライ トシ ー ト (Sprite Sheet) と 呼ば れ ま す 。 こ の スプ ライ トシ ー ト に は 、 い ろ い ろ な 種類 の 
64x64 の マス の 画像 が 含ま れ て いま す 。 

enchant.js に 限ら ちら ず 、 2D ゲ ー ム で は この よう な 複数 の 画像 を まとめ た 画像 を 使う こと が 多く あり ます 。 
enchant.js に は Mas と いう 機能 が 備わっ て いる の で 、 ご これ を 使え ば マス 目 が 簡単 に 作れ ます 。 
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// マス 
var map = nevw Map(64, 64); 


map.x = 64; タイ ル の サイ ズ は 64x64 ド ッ ト 


map.Y = 10: 


map.image = game.assets[mapTiles]; マッ プ 用 の ファ イル を 読み 込む 


var mapDisplayData = [ 


Op OF 9。 0。 2。 2 2。 0。 OU UYU 96, MI, 

(0, Oi 0。 0。 2 。 3, 3, 2。 0。 上 。 0。 90. II, 

MM 0 0 2 3。 3。 2 る 9。 0 9 60 9 

OU 9。 9。 5。 き 。 2 Ul Oy 6 1, 
[0, 0, 0, 0, 4 0, 0, 0, 1, Ly 0, 4, 0], 数 字 を 使っ て 指定 し ます 
OO 0 0。 0 。 人 あ 。 0。 0。 0 。 6 60 |, 

LO。 M。 0。 2 2 。 0。 0。 0。 0。 0。 0。 0。 21, 

[OI 0 り 0。 3 う 。 3。 2 0。 0。 0 0。 4。 2。 2| 

0 0。 0。 3。 う 3。 う 。 2 0。 0。 る を /。 う 。 3 


lj 


map.loadData(mapDisplayData) ; 


new Map(64, 64) の と ころ で タイ ル の サイ ズ を 64x64 ド ッ ト に 指定 し 、 game . assets [mapTiles] 
で あら か じ め 用 意 さ れ て いた mapri1es .sng を 読み 込ん を で いま す 。 


マ 表 8-1 Map ク ラス の 主 な 属性 ノア メソッド 


コン スト ラク タ 説明 
_ enchant.Map (width, height) タイ ル の 幅 と 高 さ を 指定 する 。 
属性 説明 
1mage Map で 表示 する タイ ルセット 画像 
tileHeight Map の タイ ル の 高 さ 
tilewiath ーー©©©“Map の タル の 栓 由 ーー 
メソ ッ ド 説明 
_ oheckmi1e(x, y) ”  。 。 ある 座標 の タイ ル が 何 か 調 べ る 。 
hitTest(x, y) Map 上 に 障害 物 が ある か どう か を 判定 する 
1oadData (data) デー タ を 設定 する 


86 ee を ee を ee メル メ ミ メル トメ スルメ メル ミ メ スルメ メル ミ メル トミ メス ルミ スルメ メメ ルミ メル ミ メル K ミ メル ミ メ メス ルミ メル ミ メ スル メ メル K メル ミ 1) 


フィ ー ル ド を 作ろ う 


mapDi sp1ayData は マス の 並べ 方 を 指定 し て いま す 。 数字 は 64X64 に 区 切ら れ た マス 目 に 付け られ 
た 番号 で す 。o か ら 4 ま で の 5 種類 の マス の 組み 合わ せ で マッ プ が で きま し た 。 


ほか に サン ブル で は 、 ス プラ イト の 透過 度 (opacity) を 指定 し て いま す 。ocopaoity=1 は 不透明 、 
opaoity=0 は 完全 に 透明 で す 。 中 間 の 値 を 指定 する こと も で きま す 。 


MMMM な ぜ ス プラ イト シー ト を 使う の か 
スプ ライ トシ ー ト は 、 マ ッ プ シス テム ある い は タイ ル シ ス テム と も 呼ば れ 、2D ゲ ー ム で 
よく 使わ れ ま す 。 ス プラ イト シー ト は 大 き な 画 像 の 一 部 だ け を 表示 する こと で 複数 の 
画像 を 表示 で きる 方 法 で す 。 


マッ プ で バラ フォ ー 
マン ス ア ッ プ で す 


回 8.3 スプ ライ トシ ー ト 


スプ ライ トシ ー ト を 使う 理由 の お も な も の は パフ ォ ー マ ンス で す 。 画像 が 大 きく て も 
小さ く て も 1 つの 画像 を 読み 込む 時 間 は あま り 変 わり ませ ん が 、 数 が 増え る と 時 間 が 
か か り ま す 。 た と えば 、16 枚 の 画像 を 読み 込む より 、1 つ の スプ ライ トシ ー ト と し て 読 
み 込 め ば 時 間 が 1/16 で すみ ます 。 マ ッ プ の よう に た くさ ん の 細か い 画 像 を 描画 し た い 
と き に スプ ライ トシ ー ト を 使う と 、 ブラ ウザ や ハー ドウ ェ ア の 人 負荷 も 少な く て すみ ます 。 
ほか に も アニ メー ショ ン の 連続 画像 を 1 つの スプ ライ トシ ー ト に まとめ る こと な ど が あ 
り ま す 。 こ ちら も 読み 込み 時 間 と 描画 の 負荷 を 減ら せる の で 、 本 書 で も 使っ て みる こ 
と に し まし ょ う 。 
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し 
1 _ 
( た | クラ ス を 使う 
トド ーー コ ト ーー トニ ーー ドー: トニー ニー ニニ ニュ : ト ーー ニキ ーー ニキ ニー ーー コーー ト ニー ニー ニキ ーー=| ニ ーー トー 一 ーー トー ニー ーー: ト ーー トー ニニ トート ーー ニーー: ト ーー トー 一: に ーー] ニー ニュ ーー トー トー に ーー に ニー 
これ か ら コ ー ド が どん どん 増え て いき ます の で 、 書 き や す く 使い や すく する た め に マッ プ に 関連 し た 
ロジ ッ ク や デー タ を タラ ス と し て まとめ まし ょ よう 。 


a Pr - Fa = ーーーーー 1 = ーー ーー 
PF = P 
\ の 


クラ ス っ て どん た な も の ? 「 
クラ ス を Wikipedia で 調べ て みた ら 次 の よう な 説明 に な っ て いま し た 。 


i クラ ス (class) 
クラ ス は 賢く 使う と クラ ス (class) は 、 ク ラス ベー ス の オブジェ ク ト 指向 に お いて オプ ジェ クト の 設計 図 
ニコリ に あたる も の 。 抽象 デー タ 型 の 一 つ 。 ク ラス か ら 生 成 し た オプ ジェ クト の こと を イ 
ンス タン ス と いう 。 一 wikipedia (http://ja.wikipedia.org/wiki/ ク ラス _( コ ンピュータ)) 


し か し 、 こ れ で は な か な か 分 か り づ らい で すね 。 こ の 本 の た め に 、 か な り 大 雑 把 に 
説明 する と 、 ク ラス は 「 型 |] の よう な も の だ と いえ ます 。 

た と えば 、 船 の 型 を 使え ば 、 船 の クッ キー が 簡単 に た くさ ん 作れ ます 。 こ れ と 同じ よ 
うに 、 プ ログ ラミ ング で クラ ス を 作っ て お く と 同じ タイ プ の 部 品 を た くさ ん 作れ る の で 
す (も ちろ ん 変化 を 付け る こと も で きま す ) 。 ク ラス か ら 作 られ た プロ グラ ミン グ の 部 
- 品 を オプ ジェ クタ ト と 呼び ます 。 た と えば 、1 つ の 船 の クラ ス か ら 複 数 の 船 (オブ ジェ ク 
ト ) が 作れ ます の で いち いち プロ グラ ミン グ す る 手間 が 省け る の で す 。 か な り 大 雑 把 
な 説明 に な り ま す が 、 こ うい う 考 え 方 を オブ ジェ クト 指向 プロ グラ ミン グ と 呼び ます 。 


プロ グラ ミン グ の スタ イル に は 、 手続 き 型 関数 型 、 エ ー ジ ェ ン ト 指 向 、 デ ー タ 指向 
] な どい ろ い ろ な も の が あり ます 。 そし て それ ぞ れ に 優れ た 点 が あり ます 。 た だ 、 ゲ ー 
| ム に は モノ (オブ ジェ クト ) が た くさ ん ある た め 、 オ ブ ジ ェクト 指向 に 向い て いる と い 
| える で し ょ う 。 ま た 、AI の 分 野 で は エー ジェ ント 指向 の 影響 が あり ます の で 、 開 発 を 
し て いる と 耳 に する こと が あり ます 。 描画 周り や オン ライ ン ゲ ー ム で は 関数 型 プ ログ 
ラミ ング や デー タタ 指向 が よく 出 て きま す の で 、 そ れ ぞ れ を 概念 だ な け で も 理解 し て お く 
と 役立つ と 思い ます 。 


で は 、enchantjs で の クラ ス の 作り 方 を 説明 し まし ょ う 。enchantjs の クラ ス は 、Ccl1ass. 
create(superolass, definition) と いう 関数 で 作れ ます 。 次 の 例 で は 、Bsax と いう クラ ス を 作っ て 
いま す 。 
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フィ ー ル ドド を 作ろ う 
Bear = Class.create(Sprite, { 目 作 クラ ス sear の 定義 
initialize:function(){ クラ ス の 初期 化 関 数 (コン スト ラク タ ) 
Sprite.call(this,32,32),; - 
this.image = game.assets['figl.png']; スプ ライ ト の 初期 化 
dame .rootScene.addChild(this); 
] 画像 の 指定 


オブ ジェ クト が 作ら れ た と き に 自動 で 実行 する 処理 は 、initia1ize:Eunotion() {の と ころ に 書い 
て お きま す 。 こ れ を コン スト ラク タ と 呼び ます 。 
クラ ス を 定義 する と 、 今 度 は も っ と 簡単 に キャ ラク ター を 出せ る よう に な り ま す 。 


bear = new Bea エ ( ) 


これ だ け で す 。 こ こ で は 、sprite ク ラス を 元 に し て 自作 の seac ク ラス を 作り まし た 。 これ を 継承 と 呼 
び ま す 。 継 承 す る と 、Sprite の 機能 を すべ て も っ た gearc ク ラス が 簡単 に 作れ ます 。 継承 を 使わ な い 場 合 
は 、 次 の よう に 書き ます 。 


継承 元 が な い 
Class.create({ 


initialize:function(){ 
ng。 メー10: 
9 


また 、 ク ラス に は イベ ント リス ナー を 書い て お く こ と も で きま す 。 


自作 クラ ス Eear の 定義 
Bear = Class.create(Sprite, { 
Wit 2e Funation dt クラ ス の 初期 化 関 数 (コン スト ラク タ ) 
Sprite.call(this,32,32); スプ ライ ト の 初期 化 
this.image = dame.assets[ fid1 .pnd「']/ 


9ame .rootScene.addChild(this); 
画像 の 指定 


}, 
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onenterframe:function(){ 
enterframe イ ベン ト の イベ ン ト リ スナ ー 


this.x+=2; 

}, 

ontouchend:function(){ touchend イ ベン ト の イベ ント リス ナー 
this.y+=l10; 


こう する と イベ ント リス ナー を クラ ス ご と に まとめ て 書い て お ける の で コー ド が すっ きり し ます 。 
一 度 作 っ た クラ ス は 、 い くつ で も コピ ビー で きま す 。 


bear1 = new Bea エ ()/ 

と 
bearl. x=100; Bear か ら bear1 を 作り ます 
bear2 = new Bear(); Bear か ら bear2 を 作り ます 


bear2 .x= テ 150: 


sear1 と bear2 に は それ ぞ れ x と いう プロ パテ ィ が あり ます が 、 こ ご これら は 別 の も の と し て 扱わ れ ま す 。 
クラ ス を うま く 活 用 する こと で 効率 的 な 開発 が 可能 に な り ま す 。 


(2| GameMap の クラ ス を 定義 し よう 


に トート ーー キーー ト ーー トー ニー トーー キ ーー ニーー ゴ ーー ニー トーー「ーーー ト ーー トーーー ト ーー ニー トーーー ト ーー バーー- ト ーー!ーー ト ーー】 ニ ーー に ーー トーー ト ーー ゴーー ン | ニー トニー ーー ゴー ニー ニーーー ト ーー トーー ト ーー トーーー ト ーー トーー オ ーーー ト ーー ョ ー| 


で は 今 作 つて いる ゲー ム の 開発 に 戻り まし ょ う 。 ク ラス の 説明 を 見 て 気が付い た 人 も いる と 思い ます が 、 
今 ま で に 使っ た Labe1、Sprite や Map は どれ も クラ ス で す 。 こ ご ちら の クラ ス 、 そ し て これ ら 以 外 の 便利 
な クラ ス は あら か じ め enchantjJs の フレ ー ム ワー ク に 入っ て いま す 。 し か し 、 ゲ ー ム に 必要 な クラ ス は 
自分 で 作ら な けれ ば いけ ませ ん 。 た と えば 、| 地図 | 船 」 | 技 | な ど で す 。 で は これ か ら 地 図 の クラ ス を 
作っ て み ま し ょ う 。main.js に Mas ク ラス を 定義 し ます (コー ド は pirates っ chapter_08 ~ 02 に あり 
ます )。 


(は MX スルメ スルメ メル ミ メル メ スルメ メル ミ メ メル メ メス ルミ メル トミ メス ルミ メト ルミ メ メル ミ メル ミ メル ミ メル ミ メ メス ルミ メス ルミ スル メ メル K メル ミ 1) 


フィ ー ル 下 を 作ろ う 


var GameMap = Class.create({ 


initialize: function(scene, mapData) { 


// 梓 
var frame = new Sprite(960, 640): 枠 サ イズ は 960x640 ド ッ ト 
frame.image = game.assets[mapFrame]; 


scene.addChild(frame) ; 


// 背景 
= に 
Var background = new Sprite(64*13, 64*9) 背景 は 縦 13 マ ス メ 横 9 マス ぶん 


background.image = dame.asSse モ 上 s[mapBaokqdround00]: 
background.x = 64; 

background.y = 10; 

scene.addChild(background); 


// 定 災 
var tiles = new Map(64, 64): Map を 使っ て マス 目 を 準備 


tiles.image = game.assets[mapTiles]; 
tiles.x = 64; 

tiles.y = 10; 
tiles.loadData(mapData) ; 


tiles.opacity = 0.5; 、 
タイ ル の 透明 性 


scene.addChild(tiles); 


の 
}); 


新しく 作っ た GameMap の クラ ス は 次 の よう に 使え ます 。 


が マス の デー タ 
ゞ ar mapDisplayData = [ 


var map = new GameMap(soeneGameMa1n, mapDisplayData); 
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my 
1 へ “ ~~ 
| タッ チイ ベン ト を 作っ て みよ う 
トド ーー トー コト ーー = = ーーー (= = EE = = = EI EE i= EE FE IE EE EE に ニニ ニニ | ニニ トー ミニ ニー コニーー ト ニー ニニ トニ ーー ニニ ニニ | ニニ =』 ニ ーー FE EE 
マッ プ の デー タ を クラ ス を 使っ て 書い て まとめ た と ころ で 、 次 は マッ プ に タッ チ で きる よう に し まし ょ 
う 。 次 の よう に 単純 な タッ チイ ベン ト を 書い て いま す (コー ド は pirates 一 chapter_08 一 03 に あり 


ます )。 
/** 
* Map グラス 
0 コン スト ラク タ を 定義 
var GameMap = Class.create({ 


initialize: function(scene, mapData) { 


// マス 
var tiles = new Map(64, 64); 


タッ チ を 可能 に する 
自身 に 対す る タッ チ の 終了 イベ ント 


tiles.touchEnabled = true; 


tiles.addEventListener(enchant.Event.TOUCH END, function(params){ 
alert(" タ ダッチ x:"+params.x + y:"+params.y); 


Ns 


}, タッ チ の あっ た 箇所 の X 座 標 と Y 座 標 を 示す 


まず 、 tiles.touchEnabled = true O00 / mdexhml 


そそ > で | 円 fle:///Users/robert/Desktop/pirateTactics/enchantjs-builds-0.8.1/game/pirates703/index.html | 三 


で タッ チ が 可能 な 状態 に 設定 し ます 。 イ ベ 
ント 処理 は 基本 的 に aaaEyentListener 
([ イ ベン ト 名 ] , [ハン ドラ 1 ) で 書い て い 
きま す 。 こ こ で は 、enchant.js の Event 
クラ ス が 持つ 、roucH_ END と いう イベ ン ーー i 
ト に 対し 、alert 関 数 を 実行 し て いま す 。 
この 状態 で マッ プ を タッ チ す る と ポッ プ 
アッ プ が 出 て きま す 。 
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フィ ー ル 下 を 作ろ う 


ボ ポップアップ の 中 に タッ チ し た 箇所 の 座標 が 示さ れ ま す 。enchant.js の gyvent ク ラス の イベ ント は 
TOUCH_ END イベ ント 以外 に も いろ いろ な も の が あり ます 。 ゲ ー ム に 使え そう な も の を いく つか が 紹介 し て 


お きま し ょ う 。 


マ 表 8-2 gysnt ク ラス の イベ ント (ユー ザー の 操作 に 関わ る も の ) 


ほか に も た くさ ん の イベ ント が 定義 され て いま す 。 詳 しく 知 り た い 場 合 は enchantjs の リフ ァ レ ンス 


を 参考 に し て くだ さい 。 


レ 


enchant.js の イベ ント 
http://wise9.github.io/enchant.js/doc/core/ja/symbols/enchant.Event.html 


イベ ント 説明 
enchant . Event. A BUTTON DOWN a ボタ ン が 押さ れ た 
enchant .Event.A BUTTON UP a ボタ ン が 離さ れ た 
enchant .Event.B BUTTON DOWN b ボ タン が 押さ れ た 
enchant .Event.B BUTTON UP b ボ タン が 離さ れ た 
enchant .Event.UP BUTTON DOWN up ボタ ン が 押さ れ た 
enchant .Event.UP BUTTON UP up ボタ ン が 離さ れ た 
enchant .Event. DOWN BUTTON DOWN down ボ タン が 押さ れ た 
enchant .Event.DOWN BUTTON UP down ボ タン が 離さ れ た 
enchant .Event. RIGHT BUTTON DOWN right ボ タン が 押さ れ た 
enchant .Event. RIGHT BUTTON UP right ボ タン が 離さ れ た 
enchant .Event. LEFT BUTTON DOWN left ボ タン が 押さ れ た 
enchant .Event. LEFT BUTTON UP left ボ タン が 離さ れ た 
enchant .Event. INPUT START ボタ ン 入 力 が 始ま っ た 
enchant .Event. TNPUT CHANGE ボタ ン 人 入力 が 変化 し た 
enchant .Event. TNPUT END ボタ ン 人 入力 が 終了 し た 
enchant .Event. TOUCH END 自身 に 対す る タッ チ が 終了 し た 
enchant . Event. TOUCH MOVE 自身 に 対す る タッ チ が 移動 し た 
enchant .Event. TOUCH START 自身 に 対す る タッ チ が 始ま っ た 
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1 


| 通行 で きる か ン で き な い か ? 


に トー トト ーー に トド に に トー トト ーー 上 に ニニ に 


これ で メッ セー ジ は 出せ まし た が 、 ゲ ー ム の た め に は 座標 で は な くど の マス を タッ チ し た の か 知り た い 
と ころ で すね 。enchant.js で は 、 Mas ク ラス に 付い て いる 機能 で 座標 か ら マ ッ プ の 情報 を 得る こと が で 
きま す (コー ド は pirates 一 chapter_08 一 04)。 


判定 用 デー タ の 作り 方 


ます ず 、 プ ログ ラム で 地形 を 扱い 易い よう に マッ プ の ia に 対し て 名 前 を 対応 付け て お きま し ょ う 。 


var tileTypes = { 


um1 : {1d:0, name: umi }, 
id:0 一 海 
る だ みれ 3 {id:l, name:"arai"}, id:1 一 荒い 海 
a8a1: {id:2, name:"asai"}, id:2 っ 浅い 海 
. | id:3 一 陸 
riku: {id:3, name:"'riku"}, id:4 一 岩 
1wa: {id:4, name:"iwa"}, 


umi、arai、asai、riku、iwa の 5 種類 の マス を 定義 し まし た 。 
次 に 、 マ ス ご と の 通行 可能 / 通 行 不 可能 の マス を 判定 する た め の デ ー タ を 作り ます 。 こん な 配列 を 
mapDisplayData か ら 自 動 で 作れ る よう に プロ グラ ム を 書き ます 。 


var mapCollisionData = [ 
I 0。 0。 0。 0 0。 DG O00; 0。 0。 0, 0。 Ol, 
OM 0。 り 。 0。 5 0 Lil, 0 0 0 5 0 9.。 0 
OL 0。 9,。 i 5。 9。 汗 。 1 は 。 0) 9 り 。 Oi 6。 5。 Ol 
LO。 QO 0。 0。 0。 OO 0。 OG 0 0。 0⑥。 0。 0。 OQ, Ql, 
OM 905 0 0 1。 (0。 0 。 0 UO 0 きき は 。 5 
IO。 0O。 9。 DO 0。 1 Oi Or 6。 0。 9。 0。 Ol, 
[0。 0 。 0。 0。 0。 0; 0 0,。 0。 0。 0。 90。 0。 0。 0】, 
隊 005 0 0 0 1 。 0 0 9 0 0  JM 0 0 9 UN 
IO。 0 0。 0。 まま 。 も 0 OG, CU, 9 まほ 所 El 
[O。 BD UO OO 0。 0,。 0。 0。 Ll LT ま 。 
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フィ ー ル ド を 作ろ う 


判定 デー タ は 0 と 1 だ け を 使用 し て いま す 。0 は 通行 可能 、1 は 通行 不可 の 意味 に な り ま す 。 

これ くら い 小 さ な マ ッ プ で わざ わざ 判定 用 の デー タ を 持つ の は 本 当 は 大 義 殺 な の で す が 、 ゲ ー ム が 大 き 
く な る と 描画 マッ プ と 判定 マッ プ を 別に 管理 する こと は 珍し く あ り ま せん 。 勉 強 の 意味 も 兼ね て 今回 は こ 
の よう に 書い て み ま し ょ う 。 

今回 の 地形 だ と 陸 と 岩 は 通行 不可 な の で 、 そ れ を 元 に 判定 デー タ を 作成 し ます 。 


// マッ プ の 大 き さ を 保存 
this.mapHeight = mapData.length; 
this.mapWidth = mapDatal[O0].length; 


// 元 の マッ プ デ ー タ か ら 陸 や 岩 の co11ision デ ー タ を 生成 


var mapCollisionData = []: 


for(var j=0; ] < this.mapHeight; ]++) { マッ プ の 縦 の ぶん だ け ル ー プ する 


mapCollisionDatal[]] = [] 
for(var i1=0; 1 < this.mapWidth; i++) | マップ の 栓 の ぶん だ け ル ー プ する |) 
if (mapData[j][i]l == tileTypes.riku.id || mapData[j]l[i] == 
tileTypes.iwa.id) { 
mapCollisionData[]].push(l); 


mapCollisionData[]].push(0); 


} それ 以外 は 通行 可 
} 


this.tiles.collisionData = mapCollisionData 


マッ プ デ ー タ を 調べ て 、iq が riku あ る い は iwa の も の で あれ ば 1 を 、 そ れ 以 外 は 0 を 配列 に 代入 し て い 
きま す 。 こ れ で デー タ の 準備 は 整い まし た 。 あ と は タッ チ の 拳 動 を 作り 込み ます 。 


mA 
1 

(| 座標 を 変換 する 
aim 

とこ こま で の サン プル を よく 見 る と タッ チイ ベン ト で 表示 され た 座標 は 画面 の 左上 の 角 か ら の 距離 に な っ 

て いま す 。 マ ッ プ は ゲー ム 画 面 の 上 か ら 10 ビ ピク セル 、 左 か ら 64 ビ ピク セル の 位置 に ある の で 、 そ の まま マ 

ッ プ の 判定 に 渡す と ズレ が 生じ ます 。 こ ご これ は ゲー ム を 作る と き に よく 直面 する 問題 で す (これ か ら 使 う コ 

ー ド は pirates 一 chapter_08 ~ 04b に あり ます )。 
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JavaSscript Alert 


。 通れ な い 、iwa 


どの 世界 で も 位置 を 表現 する 座標 は 多数 (無限 ) に あり ます 。 た と えば 、 現 在 地 を 知る に は GPS に よ 
る 座標 も あり ます が 、 町 の 郵便 番号 と いう 座標 も や も あり ます ね 。 ほ か に も 広い 宇宙 全体 か ら 見 た 世界 共通 の 
座標 も や も ある か も し れ ま せん 。 

世界 共通 の 座標 は 、 ゲ ー ム で いえ ば ワー ルド 礎 標 も し く 総 対 訂 標 で す 。enchant.jsS の タッ チイ ベン ト 
で 取れ る 位置 情報 も この ワー ルド 座標 (ゲー ム 画 面 の 左上 端 か ら の 位置 ) で 示さ れ て いま す 。 

これ と は 別に 、 ゲ ー ム 画面 上 の どこ か の 位置 を 基準 に し た 別 の 座標 も 考え られ ます 。 普段 の 生活 で も い 
つも GPS 上 の 座標 を 気 に し て いる わけ で は な く 、 い ま 自 分 の いる 位置 か ら 110m 向 う 、5m 左 」 と いう 
よう な 考え 方 を し ます ね 。 これ は ゲー ム の 用 語 で いう と ロー カル 座標 も し く は 相対 座標 で す 。 


ワー ルド 座標 (x:O,y:O) 


画面 


ワー ルド 座標 (x:20,y:50) 
ロー カル 座標 (x:O,y:O) 


ワー ルド 座標 (x:50,y:100) 


参 
ロー カル 座標 (x:30,y:50) 


図 8B-4 ワー ルド 座標 と ロー カル 座標 


今回 の タッ チイ ベン ト の 位置 も ワー ルド 座標 か ら ロ ー カ ル 座 標 に 変更 し まし ょ う 。 数 学 的 に 座標 の 変換 
に は さま ざま な 理論 が あり ます が 、 今 回 は 普通 の 四角 い 2D ス ペー ス で すか ら 、 た ん に 目的 の ワー ルド 座 
標 か ら マ ッ プ の ある 位置 の 座標 を 引け ば 目的 の ロー カル 座標 か 計算 で きま す 。 ク ラス の メソ ッ ド に する と 
と の よう に な り ま す 。 


メメ スルメ メル ミ メル トミ メル トメ メル K ム コル トミ メス ルミ メル メ メル メル メル ミ メル ミ メル メ メル メ メル メ メル トメ メル トメ メス ルミ メル K メル ミ ミス ルミ 1 は ) 


フィ ー ル ド を 作ろ う 


toLocalSpace:function(x,y) { 
var localX = x -this.tiles.x; ワー ルド 座標 か ら ti1ss の 座標 を マイ ナス 
var localY = y -this.tiles.y; 


return {x:localX, y:localY} 


ここ まで の ノウ ハウ を 組み 合わ せる と タッ チイ ベン ト か ら 地 形 デ ー タ を 正しく 読み 取れ る よう に な り ま 
す 。 


ontouchend:function(params) { 


// collision デ ー タ を 利用 し て 判定 を する 


if (this.hitTest(params.x, params.y) ニー true) { 
alert(" 通 れ な い ") 
} else { 


alert(" 通 れる ") 


}, 


hitTest() 関数 に 座標 を 入れ る と 、 通 れる か 通れ な いか が 判定 され ます の で 、 メ ッ セ ー ジ を 表示 する 
よう に し まし た 。 


Javascript Alert 


、 通れ な い 、Iwa 


こと こま で で 、 タ ッ チ イベ ント か ら 地 形 を 逆 引 き 出来 る よう に な り ま し た の で 、 次 は それ を 利用 し て キャ 
ラク ター の 船 を 動か せる よう に し て み ま し ょ う 。 
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船 を 動か そう 


マス 上 で 距離 を 測る 方 式 と し 
て は 、| ユークリッド 距 離 ] |「 チ 
ェ ビ シェ フ 距 離 」 | マン ハ ッ タ 
eoo CN = | ン 距 離 ] が あり ます 。 こ こ で 
nn & | 円 file: PRC etme non: は 「 マ ン ハ ツ タ ン 距 離 ] を 採 


船 は クラ ス と し て 
作り ます 


スプ ライ ト の アニ メ 介 
国 る よう に し ます 


船 を クリ ッ ク す る と 、 
移動 可能 な 範囲 が 表 
示さ れ ま す 。 岩 や 陸 
に は 移動 で きま せん 


本 草 で 勉強 する こと 
"ダー ム の 「 且 に 相当 する 閣 の ユニット を | @ 朋 の 移動 カ の ぶん だ け 動か す 仕組 み を 作り 
フラ 


e スプ ライ ト を 拡張 し て 作る こと に し ます e マッ プ 内 で 距離 を 測る 3 つの 方 法 に 関す る 


eenchant.js の 機能 を 利用 し て 船 に アニ メ 知識 を 付け まし ょ う 
ーション を 加え よう @ ク リッ ク す る と 動け る 範囲 が 表示 され る 仕 
組み も 作り 込 も う 


船 を 動か そう 


a 
| a 
(た | 船 ク ラス を 作る 
人 ii 
地図 の タッ チイ ベン ト が で きた の で 次 は 船 の クラ ス を 作っ て 動か せる よう に し た いと 思い ます 。 

船 ク ラス は 基本 的 に Sprite ク ラス を 拡張 し て 作り ます 。 あ る クラ ス を 元 に し て 新しい クラ ス を 作る こと 
を オブ ジェ クト 指向 の 用 語 で 継承 (inheritance) と 呼び ます 。 ち ょ っ と 単純 化し すぎ か も し れ ま せん が 、 
継承 は 元 の クラ ス の 機能 を 引き 継い で ご 何 か を プラ ス す る こと だ と 思っ て くだ さい 。sprits ク ラス を 元 に 
し た guns ク ラス の コー ド は 次 の よう に な り ま す (これ か ら 使 う コ ー ド は pirates 一 chapter_09 一 05 
に あり ます )。 


var Fune = Class.create(Sprite, { sprite ク ラス を 継承 


initialize: function(scene) { 
sprite,call(this, 96, 96); 継承 元 の クラ ス の コン スト ラク タ を 実行 する 


this.image = game.assets[shipsSpriteSheet]; 


継承 する と Frune は sprite の メソ ッ ド や デー タ に 簡単 に アク セス で きま す 。 

enchant.js は 基本 的 に JavaScript の 継承 シス テム に 沿っ て いま す の で 、 コ ンス トラ クタ に 新しい 機能 
を 加え た いと き は 、 例 示し た コー ド の よう に sprite.ca11(this, 96, 96) : と し て まず spsrits ク ラ 
ス の コン スト ラク タ を 実行 する 必要 が あり ます 。 こ れ で 自分 の オブ ジェ クト (this) に 継承 元 の クラ ス 
(Sprite) の 初期 化 ロ ジッ ク (コン スト ラク タ ) が 反映 され ます 。 こ の 手順 を 行う 理由 を 理解 する に は 
JavaScript 言 語 の プロ ト タ イ プ 機 能 に つい て の 知識 が 必要 で す 。 興味 が あれ ば 調べ て みて いた だ きた い 
で す が 、 今 回 の よう に ゲー ム を 作る た め だ け で あれ ば 「 継承 する と き は 、 こ ご の 手順 を 忘れ ず に 行う 」 と 覚 
えて も ら っ て も 十分 で す 。 
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継承 と 集約 。 2 
| ここ で 、 ち ょ っ と 気 に な っ た 人 が いる か も し れ ま せん 。 前 の 章 で 作成 し た GameMap 
クラ ス は Map ク ラス を 継承 し な いで も よかっ た の で し ょ うか ? GameMap ク ラス に は た 


し か に Map の 機能 が あり ます 。 し か し 、Map 以 外 の 枠 や 背景 な ど に は sprite の 要素 
も 含ま れ て いま し た 。 この よう に 複数 の クラ ス の 機能 を 併せ 持つ 場合 は 集約 
(aggrigation) ある い は 複合 (composition) と 呼ば れ て いま す 。 

クラ ス を 作る と き 継 承 に する が か 集約 する か に は 、 さ まさ ざま な 考え 方 が あり ます 。 こ れ 
は ちょ っ と 哲学 的 で も あっ て 、 答え も ひと つ で は あり ませ ん 。 

実際 に は [cameMap は 継承 で も いい の か ?]、[Fune は Sprite を 集約 し て も いい で 
は な いか ?] と いう 議論 も あり ます が 、 今 回 は 両方 の や り 方 を 紹介 する た め 、 
GameMap は 集約 、rFune は 継承 で 進め た いと 思い ます 。 


| 
ll 
( た | マス の 空間 
に ーー コト ーー ニー ニニ ーー 
この シミ ュ レ ーション ゲー ム は マス を 使っ つて いま す の で 、 実際 に 船 を マッ プ 上 で 動か す と き に 座標 
(x,y) を 単位 に 指定 する の は 不便 で す 。 そ の た め 別 の 単位 を 決め まし よう 。 今 回 は マス 目 単位 の 軸 (: 電 


と ュ 軸 ) を 使う こと に し ます 。 


図 9-1 マス 目 の i 軸 と j 軸 


eameMap に 次 の よう な 単位 の 変換 メソ ッ ド を 追加 し て いま す (詳細 は サン プル コー ド で 確認 し て くだ 
さい )。 


・torioca1Spaoe : Eunotron (wor1dX, wor1dyY) : ワー ルド 座標 を 与え る と ロー カル 座標 


(1oca1X , 1oca1Y) を 返す 
・ て toWor1dSpaoe : function (localx, localy) : ロー カル 座標 を 与え る と ワー ルド 座標 
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船 を 動か そう 


(wor1dX , wor1dY) を 返す 
・getMapTi1eAtPositron : Funotion(1oca1X, 1oca1Y) : ロー カル 座標 を 与え る と マ 


ス 目 は , j) を 返す 
・getMapPos+tionAtTi1e : Funotion (1 ,]) : マス 目 を 与え る と ロー カル 座標 (1oca1x , 


1oca1Y) を 返す 


これ を 利用 し て Eune オ ブ ジ ェクト を 配置 する た め の 関 数 を 追加 し まし た 


positonObject: function(object, i, ]) { マス の 位置 か ら ロ ー カ ル 座 標 を 計算 


var postion = this.getMapPositionAtTile(i, ])/ 


var worldPosition = this.toWorldSpace(postion.localX,postion.localY); 


object.x = worldPosition.x; ロー カル 座標 か ら ワ ー ル ド 座 標 を 計算 


object.y = worldPosition.y; 
}, 


positonFune: function(fune, i, J) { 船 を 動か す 関 数 


this.positonObject(fune, i, J); 
}, 


最後 は 船 を マッ プ に 置き まし ょ う 。 game . onload に 次 の 2 行 を 追加 し て 船 を i :3,」:3 に 配置 し ます 。 


var fune = new Fune(); 


map.addChild(fune); 


map.positonFune(fune, 3, 3); 船 を i:3, ]: 3 に 配置 
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O 』 日 Index.html 


を > で 日 fle///Users/robert/Desktop/pirateTactics/enchantJs-builds-0.8.1/game/pirates/05/index.html | 


mA 
| a 
(た | 船 に アニ メー ショ ン を 付け よう 
mm 
船 を タッ チ で 動か す 前 に 、 ち ょ っ と ゲー ム ら し くす る た め に ユラ ユラ と 船 が アニ メー ショ ン す る よう に 
し まし ょ う (コー ド は chapter_08 06 に あり ます ) 。 
アニ メー ショ ン さ せる に は 一 定時 間 で 画面 を 更新 させ ます 。 1 秒 に 何 回 に 画面 を 更新 を する か と いう 単 
位 は FPS (Frames Per Second) で す 。enchant.js で FPS を 設定 する の は 簡単 で す 。game . Eps = 
30 : で 30fps を 指定 し まし た 。 


window.onload = function(){ 
var game = new Core(960, 640); 


game.fps = 30; 
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船 を 動か そう 


理想 の FPS は ? 


ゲー ム の 世界 で 理想 的 な の は 60fps で す 。 今 の 時 代 の テレ ビ は 最大 60fps の 再生 能 
力 が あり ます の で 、 そ れ 以 上 で は 無駄 が 出る こと に な り ま す 。 
| 60fps と いう こと は 、1 秒 =1000 ミ リ 秒 と し て 単純 計算 する と 16 ミ リ 秒 以内 に 画面 更 
| - 、 新 を 終わ ら せ な けれ ば いけ ませ ん 。PS3 や Xbox 360 な どの 家庭 用 ゲー ム の ほとん ど 
』 | 。 は 24~ 30fps で し た 。 そ の 理由 は 家庭 用 ゲー ム 機 の 能力 で 16 ミ リ 秒 以内 に 3D 措 画 、 
あけ ます 物理 演算 、Al な ど を 処理 する の は 難し か っ た か ら で す 。 
意外 な こと に 初代 PlayStation や それ 以前 の 世代 の ゲー ム 機 に は 60fps ゲ ー ム が けっ 
こう あり まし た 。 逆 に 言う と 前 世代 の 家庭 用 ゲー ム は か な り 無 茶 を し て いた と いう こ 
と で す 。 最近 に な り 、PS4 や Xbox One な どの ハー ド で は 60fps の ゲー ム が 増え て き 
まわ 7 だ 2 
いま 作っ て いる 海賊 ゲー ム の 場合 、 デ スク トッ プ の ブラ ウザ な ら 60fps は 出る か も し 
れ ま せん が 、JavaScript は 少々 重い 言語 で す (最新 ブラ ウザ で は そん な こと は な いで 
す が 、 ち ょ っ と 旧い 世代 だ と 処理 が 遅く な る こと も あり まし た ) 。 ま た 、 ス マー ト フ ォ 
ン の ブラ ウザ は さま ざま で す の で 、30fps に し て お く ほ う が 無 難 で す 。 アク ショ ン 性 の 
少な い ゲ ー ム な の で 30fps で も 十分 と も いえ る で し ょ う 。 


船 の 画像 に は スプ ライ トシ ー ト を 使い まし ょ う 。 い ろ い ろ な 船 が 描い て あり ます が 、 今 は ひと つの 船 を 
アニ メー ショ ン を させ ます 。 

動か す に は enchant.js の スプ ライ トシ ー ト を 利用 し た アニ メー ショ ン 機 能 を 利用 し ます 。frame メ ソ 
ッ ド に シー ト の 番号 を 与え る だ け で 簡単 で す (コー ド は chapter_08 一 06b に あり ます )。 
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var Fune = Class.create(Sprite, { 

initialize: function(scene) { 

Sprite.call(this, 96, 96); 
this.image = game.assets[shipsSpriteSheet]; 


thies.£frame = [0。 1, 2, 31: 


} 
}); 表示 させ る コマ を 順に 記述 する 


サン プル を 動か す と た し か に 船 は アニ メー ショ ン を し て いま す が 、 ち ょ っ と 動き が 速く て 変 で すね 。 ア 
ニメーション の 順番 を 変え まし ょ う 。 


initialize: function(scene) { 


this.trame = 05 0 60 1 1。 1 2,; 2 LL, 1 OU; 0, 6 03, ラ き , 31: 


フレ ー ム を 適切 な アニ メー ショ ン の 速度 に 合わ せま し た 。 


| 船 を 地図 上 で 動か す 


eg Its] UE UE (ET TE = lc ED FED EE (ED EEN CE EE IE EEE EE EC CE ED [Ta CT EE (TEE CE EET UE = EET EE = mi (EE EE CE UE [に = EH lm 5 


GameMap に 船 を 動か せる よう に 設定 で きる メソ ッ ド を 追加 し て 、game . on1oaa で 設定 し ます (コー ド 
は chapter_09 一 07 に あり ます )。 


var fune = nevw Fune() 


map.positonFune(fune, 3, 3); 


map.setActiveFune(fune); 動か せる 船 を 指定 する メソ ッ ド 


fune と いう オプ ジェ クト を 作っ た ら 、3,3 の 位置 に 配置 し て 、 ア クティ ブ プ に し て いま す 。 
あと は eameMap の タッ チイ ベン ト の 処理 に 、 船 を 移動 する 処理 を 追加 し ます 。 
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船 を 動か そう 


ontouchend:function(params) { 


var localPosition = this.tolLocalSpace(params.x, params.y); 


var tileData = this.tiles.checkTile(localPosition.x, localPosition.y); 


var tileInfo = this.getTileInfo(tileData); 


動か せな い マ ス で あれ ば メッ セー ジ を 表示 


if (this.tiles.hitTest(localPosition.x, localPosition.y) = ニー true) { 


alert(" 通 れ な い 、"+tileInfo.name); (動か ゆ せ る と き は クリ ッ ク し た 位置 か ら タ イル の 位置 を 取得 | 
} else { 


var tile = this.getMapTileAtPosition(localPosition.x, 


localPosition.y); 


this.positonFune(this.activeFune, tile.i, tile.]); 


1, 指定 の 位置 に 移動 させ る 


試し て みる と 船 が タッ チ し た 場所 に 動き ます 。 ま た 、 岩 や 陸 に 動か そう と する と 、 | 通れ な い 」 と いう 
メッ セー ジ も 出 ま す 。 し か し 、 ま だ 自由 すぎ る か も し れ ま せん ね 。 ど こ を タッ チ を し て も ( 岩 や 陸 以 外 な 
ら ) そ ご に 移動 で きま す 。 本 来 は 決ま っ た 移動 パラ メー タ の 範囲 に 移動 を 制限 する 必要 あり ます 。 そ こ で 、 
Fune ク ラス に 移動 力 の パラ メー タ (movement) を 追加 し まし ょ う 。 


var Fune = Class.create(Sprite, { 
initialize: function(scene) { 
Sprite.call(this, 96, 96); 


Eheus, stats = 


movement: 3, 移動 力 を 表す プロ パテ ィ を 追加 


移動 を 取得 する メソ ッ ド 


}? 
1 


getMovement() { 
return this.stats.movement; 
}, 
}); 


次 に 、 オ ブ ジ ェクト の : ; の 位置 を 記憶 する た め map e positionObjeo モ を すご し 変更 し ます 。 
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positonObject: function(object, i, ]) { 
var postion = this.getMapPositionAtTile(i, J); 


var worldPosition = this.toWorldSpace(postion.localX, postion.localY); 


object.x = worldPosition.x; 


object.y = worldPosition.y; 


object.i = 1; _ 
| i . i お よび } を 保存 
object.] = ]: 


}, 


object の x,y プ ブ プロパ ティ に は ワー ルド 座標 が 入っ て いま す 。 これ で 船 と タッ チ し た マス の あい だ の 距 
離 が 計算 で きる は ず で す 。 あ と は 距離 に 応じ て 動か せる 範囲 を 制御 する 仕組 み を タッ チイ ベン ト の 処理 内 
に 加え る こと に し まし ょ う 。 


ontouchend:function(params) { 


var localPosition = this.toLocalSpace(params.x, params.y); 


var tileData = this.tiles.checkTile(localPosition.x, localPosition.y); 


var tileInfo = this.getTileInfo(tileData); 


if (this.tiles.hitTest(localPosition.x, localPosition.y) == true) { 
alert(" 通 れ な い 、"+tileInfo.name) ; 


} else { 
var tile = this.getMapTileAtPosition(localPosition.x, 


localPosition.y); 


if (this.mapGetDistance(this.activeFune.i, this.activeFune.], 


tile.1, tile.]) <= this.activeFune.getMovement()) 
る 距離 が 移動 力 以下 な ら ば | 


{ 


this.positonFune(this.activeFune, tile.i, tile.j]); 


} 
} 移動 を 実行 し ます 


}, 


だ いた いで きた よう で す が 、 距 離 を 計算 する mapGetDistance メ ゾ ッ ド は まだ 作っ て いま せん 。 この 
部 分 の 作り 方 を 説明 し ます 。 
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船 を 動か そう 


| ゲー ム の 中 の 距離 を 測る 


ーーー に ーー NE Ep ES EE EE EE ££ ££ I Ep EE ーー ーー オー ーー 


ゲー ム に お ける 距離 の 測り 方 に は さま ざま な も の が あり ます 。 特 に マス を 使う ゲー ム の 空間 で は 距離 は 
現実 世界 の 距離 の 計算 と 異な り ま す 。 ご ここ で は マス を 使う ゲー ム の 代表 的 な 距離 の 計算 方 法 を 3 つ 紹 介し 
た いと 思い ます 。 


ユー クリ ッ ド 距離 (Euclides Distance) 
ー 番 現実 世界 に 近い 距離 の 計算 の 仕方 で す 。 マ ス 目 の 中 心 同士 の 直線 距離 を 測り ます 。 


図 9-2 ユー クリ ッ ド 距離 


これ を JavaScript で 計算 する コー ド は 次 の と お り で す 。 


getEuclideanDistance: function(startI, startJ, endI, endJ) { 
var distanceSq = Math.pow(startI -endI, 2) +Math.pow(startJ -endJ, 2); 


var distance = Math.sqrt(distanceSq); 


ェ の 距離 の 2 乗 と 』 の 距離 の 


return distance; 
! 平方 根 を 求め る 2 乗 を 足す 


ユー クリ ッ ド 距離 に は 問題 が 2 つ あ り ま す 。 ひと つ 目 は 距離 が 整数 に な る と は 限ら な いこ と で す 。 小 数 
点 以 下 に な る こと も あり ます 。 
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ふた つ 目 は 計算 に 平方 根 が 必要 な こと で す 。 平方根 を 計算 する の は PC で も それ な り に 時 間 が か か り ま 
す 。 1 回 くら いな ら 未 裕 で す が 、 毎 フレ ー ム あたり 数 百 こ 数 千 件 を 計算 する と な る と ゲー ム が 処理 落ち す 
る (処理 が 追い つか な く な る ) 可能 性 も あり ます 。 


v2 三 1.414213562... 


2y2 三 2.828427 125... 
v5 三 2.236067977..…. 


チェ ビシ ェ フ 距離 (Chebyshev Distance) 


大 


図 9-3 チェ ビシ ェ ブ フ 和 距離 


チェ ビシ ェ フ 式 は 中 心 の マス を 囲む よう に 距離 が 広がっ て いく 方 法 で す 。 一 番 計算 し や すく 、 直 観 的 に 
も 理解 し や すい 方 式 で す 。 そ の お か げ で 将棋 や チェ ス の よう な 戦略 ボー ド ゲ ー ム で は よく 使わ れ て いま す 。 
これ を JavaSoript で 計算 する コー ド は 次 の よう に な り ま す 。 


getChebyshevDistance: function(startI, startJ, endT, endJ) { 
var distance = Math.max(Math.abs(startI -endT) , Math.abs(startJ -endJ)); 


return distance; 


ェ の 距離 また は の 距離 の 
いずれ か 大 き な 方 を 返す 
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船 を 動か そう 


マン ハッ タン 距離 (Manhattan Distance) 


図 9-4 マン ハッ タン 距離 


マン ハッ タン 距離 の 由来 は ニュ ー ヨ ー ク の マン ハッ タン を 移動 する の と 似 て いる か ら で す 。 マ ン ハ ッ タ 
ン の 街 は 道路 で ほとん ど 正 方 形 に 区 切ら れ て いま す 。 公園 で も な けれ ば 通常 は 対 め に 移動 で きま せん 。 マ 
ス を 使用 する ゲー ム の ほとん ど は マン ハッ タン 距離 を 移動 計算 に 使っ つて いま す 。 マ ン ハ ッ タ ン 距 離 を 
JavaScript で 計算 する コー ド は 次 の よう に な り ま す 。 


getManhattanDistance: function(startI, startJ, endT, endJ) { 
var distance = Math.abs(startI -endI) +Math.abs(startJ -endJ); 


return distance; 
} Math.abs は 絶対 値 を 返し ます 
’ ェ の 距離 と ょ の 距離 の 絶対 値 を 足し ます 


今回 の 海賊 ゲー ム で も 移動 に は マン ハッ タン 距離 を 使い まし ょ う 。 
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[円 形 ] は 丸 ] と は 限ら な い ? 


数 学 の 世界 で は [中 心から 一 定 の 距離 に な る 点 の 集まり | が 円形 | と され て いま す 。 
と いう こと は 、 距 離 を 測る 方 式 に よっ て 円 形 の 形状 は 変わ る と いう こと に な り ま す 。 
学校 で た と えば 、 ユ ー ク リッ ド 距 離 、 チ ェ ビ シェ フ 距 離 、 マ ン ハ ッ タ ン 距 離 に よる 円 形 は 次 
k2 た 39E ッ と みる 4 生還 較 の 区 | の よう に な り ま す 。 
数 学 に も ( 
面白 いこ と が / ユー クリ ッ ド 距離 の 円 
いっ ぱい あり ます ね ! アン 


っ = チェ ビシ ェ フ 距離 の 円 


ー- = マン ハッ タン 距離 の 円 


図 9-5 さま ざま な 円 が 存在 する 
この よう に 、「 丸 ] の 形 に は な っ て いな く て も 、「 円 」 と いえ る 場合 も あり ます 。 


ここ まで を 実装 し た サン プル は chapter_09 っ ~ 08 に あり ます 。 試し て みる と 船 は マン ハッ タン 距離 で 
3 以内 だ け 移 動 で きる よう に な っ て いる と 思い ます 。 


_ パ 
| いい 3 
| タッ チイ ベン ト を 表現 
次 は 、 タ ッ チ (入力 ) を 目 で 見 える よう に (出力 ) し まし ょ う 。 今 回 の ゲー ム の モチ ー フ は 海賊 な の で 
タッ チ し た と ころ に 宝 の 地図 の よう な x マー ク を 描画 し まし ょ う 。 船 が 動け る 範囲 内 な ら メ x を 赤く 、 範 囲 
外 な ら メ を 半 透 明 な 灰色 に し ます 。 


| 8 ー - _ gn し 
| 移 距 離 の 範 囲 内 actics/enchant.js-builds-0.8.1/game/pirates/09/index.html ww 三 移 に 距 区 の 和男 囲 2 actics/enchantjs-builds-0.8.1/game/pirates/09/index.html yy | 三 
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船 を 動か そう 


今回 も む ス プラ イト シー ト を 使用 し て フレ ー ム 0 ( 赤 ) と フレ ー ム 1 (灰色 ) を 切り 替え ます 。 タ ッ チ の 
ほか に マッ プ に ドラ ッ グ し た と きも ※ メ を 表示 し た い の で 、 マ ッ プ の ontouchupaate の イベ ント ハン ドラ 
を 書い て み ま す (chapter_09 っ 09 の サン プル )。 


ontouchupdate: function(params) { 
var localPosition = this.toLocalSpace(params.x, params.y); 


var tile = this.getMapTileAtPosition(localPosition.x, localPosition.y); 


if (this.outOfBorders(tile.i, tile.j)) { マッ プ 以 外 の マス の な い 場 所 は 
return 何 も し な い の で return で 中 断 


x マー ク の オブ ジェ クト が な い 
昌 合 、 ベ の スプ ライ ト オ ブ ジェ 
クト を 作る 


if (this.mapMarker == undefined) { 
this.mapMarker = new Sprite(64, 64); 
this.mapMarker.image = game.assets[mapUI]; 
this.positonObject(this.mapMarker, tile.i, tile.j); 
this.overLayer.addChild(this.mapMarker); 


x マー ク の オブ ジェ クト が ある と き は 、 そ れ を 移動 する 


this.positonObject(this.mapMarker, tile.i, tile.]); 


if (this.tiles.hitTest(localPosition.x, localPosition.y) ニー true) { 

this.mapMarker.frame = 1: ー _ 

岩 や 陸 の 上 に は 動け な い の で 距離 に 関係 な く 灰 色 マ ー ク に する | 
else 


if (this.getManhattanDistance(this.activeFune.i, this.activeFune.], 


tile.i, tile.j) <= this.activeFune.getMovement()) { 


hs.mapMarker.frame ーー 看 離 範囲 内 は メ マ ー ク を 赤く 
} else { 

this. Marker.f = 1; 
1s.mapMarker.trame 距離 範囲 外 は x マー ク を 灰色 に 
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(| 動け る 範囲 を 表示 し よう 


メ マ ー ク だ け で も プレ イヤ ー は 触り な が ら 動 ける 範囲 を 理解 で きま す が 、 あ まり 親切 で は な い の で 最初 
か ら 動け る 範囲 を マッ プ 上 に 見 える よう に し まし ょ う (chapter_09 一 10 の サン ブル )。 


@ OO / [index.htm xNW_\ に oe - ま し ( 
を う 「 由 fle:///Users/robert/Desktop/pirateTactics/enchantjs-builds-0.8.1/game/pirates/10/index.html YY 三 


』 ご この 範囲 の マス を 順に 調 
べ て スプ ライ ト の 追加 の 
可 非 を 判断 し て いく 


drawMovementRange: function() { 


console.log("update drawMovementRange'") 


if (this.areaRangeLayer) { 移動 範囲 を 示す レイ ヤー が あっ た ら 消 す 


this.underLayer.removeChild(this.areaRangeLayer); 


delete this.areaRangeLayer; 


this.areaRangeLayer = new Group(); 


this.underLayer.addChild(this.areaRangeLayer); 


現在 地 を 中 心 に し た 四角 形 の 範囲 を 左下 か ら 右 上 の 順に 調べ て いく 


FoO エ (var rangeI = -this.activeFune.getMovement(); rande エ <= this. 
activeFune.getMovement(); rangeI++) { 
var targetI = this.activeFune.1i +range エ I; 


for (var rangeJ = -this.activeFune.getMovement(); rangeJ <= this. 


activeFune.getMovement(); ranged++) { 


var targetJ = this.activeFune.] +rangeJ; 
outofBorders で マッ プ 内 で ある こと を 確認 
F "(this.outOfBorders(targetI, targetJ)) { 
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nT 


船 を 動か そう 


if (this.getManhattanDistance(this.activeFune.i, 
this.activeFune.], targetI, targetJ) <= 


this.activeFune.getMovement()) { 


_ var areaSprite = new Sprite(64, 64): 
さら に getManhattanDistance p 
で 調べ て 移動 力 以 内 な ら ば areaSprite.touchEnabled = false; 
areaSprite.image = game.assets[mapUI]; 


var position = this.getMapPositionAtTile(targetI, 


可能 位 囲 を 示す | | 者 や 陸 の マス で あれ ば 


スプ ライ ト を 作成 


if (this.tiles.hitTest(position.localXx, position. 


localY) == true) { 
areaSprite.frame = 3; 
} else { 


areaSprite.frame = 2; そう で な けれ ば 白っぽく 表示 
} 


this.positonObject(areaSprite, targetI, targetJ); 
this.areaRangeLayer.addChild(areaSprite); 


}, 


サン ブル で し ば らく 遊ん で みる と 分 か る と 思う の で す が 、 現 在 は 移動 距離 の 範囲 内 な ら 船 は どこ に で も 
行け ます 。 島 や 岩 の 向 こう に も 移動 で き て し まい ます 。 原 因 は 移動 の 経路 を 計算 し て いな いか ら で す が 、 
移動 を 正確 に 決め る の に は まだ 努力 が 必要 で す 。 今 の と ころ 、 こ の 仕様 で も 致命 的 で は な い の で 、 第 15 
章 ま で は その まま に し て お きま し ょ う 。 

これ で 船 と 移動 の 部 分 の 作り 込み は で きま し た 。 そ れ な り に ゲー ム に 見 えま す が 、 ま だ ルー ル が 足り ま 
せん の で 、 次 の 章 で ゲー ム の ルー ル の 実装 に 挑戦 し まし ょ う 。 
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GameManager ク ラス 
を 作り ます 


本 章 で 勉強 する こと 
@ ゲー ム に ター ン を 設け る こと で 、 ゲ ー ム に 
時 間 の 概念 が 生ま れる 
@ ゲー ム の 進行 を 管理 する GameManager 
クラ ス を 作り まし ょ う 


@ 複数 の プレ イヤ ー と それ に 属す る ユニ ッ 
ト 、 タ ー ン の 進行 を 管理 し よう 


各 目 ユニット を 
4 つ 配 置 し ます 


クラ ス を 使う こと で 、 
複数 の プレ イヤ ー と 
ュ ニ ッ ト を 簡単 に 増 
や せる よう に し ます 


e クラ ス を 使う こと で 、 プ レイ ヤー や ユニ ッ 
ト を 容易 に 増やす こと が で きる 

@ 2 人目 の プレ イヤ ー を 作り 、 最 終 的 に ユニ 
ッ ト を それ ぞ れ 4 つ に 増やそ う 

@ TurnUI で 現在 何 タ ー ン 目 で ある か が 確認 で 
きる よう に し て お こう 


前 の 章 で は マッ プ 上 に 船 を 表示 し て 、 動 か すこ と が で きる よう に な り ま し た 。 ゲ ー ム を 作る 際 は ここ 
で が ひと つの 大 き な チ ェ ッ クボ ポイ ント に な り ま す 。 ゲ ー ム の ルー ル は まだ 実装 で き て いま せん が 、 基 本 的 
な 入力 と 表示 は で きる よう に な っ て いま す 。 そ こ で 、 次 は 今 作 っ つて いる ゲー ム に ルー ル を 追加 し て いく ご 


ター ン 制 を 導入 し よう 


と に し まし ょ よう 。 
この 本 の 海賊 ゲー ム は ター ン 制 の ゲー ム で す の で 、 最 初 に 導入 し た い 機 能 は ター ン の シス テム と 管理 で 
す 。 ご これ が あれ ば ゲー ム に 「 時 間 ] と いう 概念 が 生ま れ ま す 。 


2| ゲー ム 管 理 ク ラス 


“= i= i= EE | Ep iE CE ££ EE EE EE fp EE EE Ep ER ££ EE EE ーー オーー ーー ゴー 
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ゲー ム の ター ン を 管理 する cameManagec ク ラス の コー ド は 次 の よう な 形 に な り ま す (サン ブル は 、 
chapter_10 っ 11 に あり ます )。 


var GameManager = Class.create({ GameManager ク ラス を 作る 


initialize: function() { 


this.playerList = []: 当初 は プレ イヤ ー も な く 、 タ ー ン は 0 


this.turnCounter = 0: 


}, 

addPlayer: function(player) {EE 吐 }, プレ イヤ ー を 追加 する メソ ッ ド 
setMap: function(map) {EE 吐 }, マッ プ を 追加 する メソ ッ ド 

se も tTurnUT: function(ui) {EL}, ター ン 表 示 の 追加 メソ ッ ド 


setStartPositions: Euno も on(s も ar も Posi も ions) { 皿 証 汗 ) , 初期 位置 の 設定 メソ ッ ド 


getActivePlayer: function() 中 中略 , 
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beginGame: function() { 
var player = this.getActivePlayer(); 
for (var funeIndex = 0; funeIndex < player.getFuneCount(); 


funeIndex++) { 


var fune = player.getFune(funeIndex) 船 を 初期 位置 に 配置 


this.map.addChild(fune) / 
var startPosition = this.startPositions.playerl[funeIndex] 


this.map.positionFune(fune, startPosition.i, startPosition.]); 


this.startTurn(); 
1 氷 


startTurn: Funo も tion() { ター ン の 初期 処理 


var player = this.getActivePlayer(); 


player.setActive(true); 


this.updateTurn(); 
}, 


updateTurn: function() { ター ン の 更新 処理 


this.map.setActiveFune(this.getActivePlayer().getActiveFune()); 


this.map.drawMovementRange(); クリ ッ ク し て いる 船 の 移動 範囲 を 表示 


this.turnUI.updateTurn(this.turnCounter) ; 
}, 


endTurn: function() { ター ン の 終了 処理 


var player = this.getActivePlayer(); 
player.setActive(false); 


現在 の プレ イヤ ー を 非 ア クティ ブ に 
し て ター ンカ ウン ター を 1 つ 増 や し 
次 の ター ン を 開始 


this.turnCounter++; 
this.startTurn(); 
}, 
}) 


管理 クラ ス は 、 複 数 の プレ イヤ ー を 管理 する よう に な っ て お り 、 さ ら に プレ イヤ ー は 複数 の 船 の オブ ジ 
ェクト を 所 有 し て いま す 。 
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ター ン 制 を 導入 し よう 


GameManager 


ビーーーーー ィ 


GamePlayer GamePlayer 


図 10-1 管理 クラ ス は プレ イヤ ー を 持っ て いる 、 プ レイ ヤー は 船 を 持っ て いる 


GameManagesr ク ラス に は プレ イヤ ー、 マ ッ プ 、 ユ ニッ ト の 開始 位置 を 設定 する 関数 が 用 意 さ れ て いま 
す 。 作 っ た ゲー ム 管 理 ク ラス に マッ プ や 船 を 設定 し ます 。 そ し て 初期 化 が 終わ っ た ら pbegineame を 実行 
し ます 。 begineams は ター ン を 開始 する startrurn を 呼び 出し 、 さ ら に 各 タ ー ン の 処理 を 行う 
updateTurn を 呼び 出し ます 。snarurn メ ソ ッ ド が 呼ば れる と ター ン の 終了 処理 が 実行 され ます が 、 今 
の と ころ ゲー ム を 終わ ら せ る 処理 は 書い て いな い の で 、 交 互 に ユニ ッ ト を ずっ と 動か し 続け られ ます 。 


game.onload = function(){ 


var sceneGameMain = new Scene(); 


// ゲー ムロ ジッ ク の 管理 


var manader = new GameManad す er() 

// マス の デー タ 

var mapDisplayData = [ 

] 

var map = new GameMap(soeneGameMa1n, mapDisplayData); 


manager.setMap (map) ; 


/ プレ イヤ ー1 


var playerl = new GamePlayer(); プレ イヤ ー の 作成 と 船 の 追加 


manager.addPlayer(playerl); 


// 船 を プレ イヤ ー に 追加 
var fune = new Fune(); 


playerl.addFune(fune); 
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// 船 の 初期 の 位置 
var startPositions = { 
playerl: [ 
13) ik2 け 
] , 
} 


manager.setStartPositions(startPositions); 


// ゲー ム に シー ン を 追加 


game .pushScene(sceneGameMain) ; 


// ゲー ム の ロジ ッ ク 開 始 


manager.beginGame (); ここ で ゲー ム が 開始 され ます 


| 


これ だ け で ター ン の 管理 は で き て いま す が 、 今 は どの ター ン で ある か を 表示 し た い の で rurnur と 言う 
クラ ス を 作り 、 そ れ も eameManager に 管理 を させ る こと に し まし た 。 


var TurnUT = Class.create(Label, { ター ン の 表示 を 行う Turnun ェ クラ ス 
initialize: function(scene) { 
Label.call(this); 
scene.addChild(this); 


RR CSS 式 に 文字 スタ イル を 設定 


this.font = "32px 'MS ゴシック '/ arial, sans-serif"; 
this.color = "rgba(l20, 20, 255, 1.0)" 
}, 


updateTurn: function(turn) { 


thig.texzt = "リタ ダー シン リリ YEuPn: 
}, 
}) 
game.onload = function(){ 
var map = new GameMap(sceneGameMain, mapDisplayData); 


manager.setMap(map) ; 
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ター ン 制 を 導入 し よう 


var turnUI = new TurnUT(sceneGameMa1n) 


manager.setTurnUI(turnUI) ; 


// プレ イヤ ー1 
var playerl = new GamePlaye エ ()/ 


manager.addPlayer(playerl); 


| 船 を 増やし て みる 


GDD に よる と 船 は 4 種類 ある の で 、 船 を 増やし まし ょ う 。 ク ラス に し て お け ば 、 同 じ コ ー ド を 繰り 返し 
書く 必要 は あり ませ ん 。 


// プレ イヤ ー 1 に 船 を 4 つ あ げ よ う 
for (var i= エエ ぐ く 4: キキ エモ ) 1 
var fune = new Fune(); 


playerl.addFune(fune); 


クラ ス を 応用 する と 、 こ の よう に 簡単 に 船 を 4 つ 作 る こと が で きま す 。 
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これ だ け で は まだ 使い た い 船 の 切り 替え は で きま せん 。 操 作 を シン ブル に し た い の で 、 操 作 し て いる 船 
以外 の 船 を タッ チ を し た ら そ の 船 を 操作 で きる よう に し ます 。 


var Fune = Class.create(Sprite, { 


ontouchend: function(params) { 


if (this.player.getActiveFune() == this) { 
同じ 船 を 触っ た の で な に も し ませ ん 
} else { 


this.player.setActiveFune(this); 


違う 船 に 切り 替え ます 


実際 は camsManager と player な ど に ほか の 細か い 変 更 は 色々 ある の で す が 、 詳 細 は |「chapter_10 
ー 12」 で 確認 し て みて くだ さい 。 


_ 
| 
2 の 人目 の プレ イヤ ー を 作る 
a rT Ia FE CE TE EE [EI CE EE EE [EE FE EN EE EE EH EE i EE [EE I EE [FE EE EE ES EE CE I EE El [EE = CE FE EE EE EE EE 
次 は 2 人 目 の プ レイ ヤー を 実装 し ます 。 これ が で きる と 対戦 型 ゲ ー ム の 一 方 手前 まで 近づき ます 。 船 を 
クラ ス で 追加 し た よう に 、 プ レイ ヤー も クラ ス に し て ある の で 、 増 や す の は 簡単 で す 。 


// プレ イヤ ー1 
var playerl = new GamePlayer({name:" プ レイ ヤー1"}) ; 
manager.addPlayer(playerl); 


// プレ イヤ ー 1 に 船 を 4 つ あ け よ う プレ イヤ ー 1 に 船 を 4 つ 追 加 


for (var i=0; i <4: ++ ュ ) { 
var fune = nevw Fune() 


playerl.addFune(fune); 


W′ フレ イヤ ー ら 
10 var p1ayer2 = new GamePlayer({name:" プ レイ ヤー2"}) ; 
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ター ン 制 を 導入 し よう 


manager.addPlayer(player2); 


// プレ イヤ ー 2 に 船 を 4 つ あ げ よ う 着 プレ イヤ ー 2 に 船 を 4 つ 追 加 


for (Var i=0; i <4: ++ ュ ) { 
var fune = nevw Fune(); 


player2.addFune(fune); 


画面 の 下 の ほ うに 見 える と 思い ます が 、 現 在 の ター ン の プレ イヤ ー 名 を 表示 する た め に rTurnUI と 
GameManager に ちょ つと 手 を 入れ まし た (chapter_10 一 13 の サン プル )。 遊 ん で みれ ば 、 実 際 に そ 
れ ぞ れ の プレ イヤ ー の ター ン が 変わ り ま す 。 あ と ちょ っ と で 対戦 で きる よう に な り ま すね 。 


10 
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オブ ジェ クト の プロ 
e テー パテ ィ イィ を 利用 し て 。、 
パラ メー タ を 追加 し 


Tir ey / OE 7 
FT SE FT a ウ 
主計 ソソ プル ピ 内 ・ 3 


HP : 120/120) 


パラ メー タ で キャ 
mm ラク ター の 特徴 を 
表現 する よっ ! 
次 は いよ いよ 戦闘 
開始 ! 


/「 本章 で 勉強 する こと 
e ゲー ム 的 な プロ グラ ム と 玩具 的 な プロ グラ @ パラ メー タ に は メソ ッ ド で アク セス する よ 
ム の 違い は 「 自 由 ] さと 「 制 約 ] の 違い うに 指定 し て お く と あと で 便利 
e 制約 (ニル ー ル ) を 加え て ゲー ム 度 を 高め e クラ ス を 利用 し て 、 楽 に ユニ ッ ト の バリ エ 
よう ーション が 作れ る よう に し よう 


@ 各 ユニ ッ ト に パラ メー タ を 用 意 する 


ここ まで の 開発 で は 、 ゲ ー ム の 描画 や 操作 に 注力 し て きま し た 。enchant.js で の HelloWorld を 表示 し 
た と ころ か ら 見 る と か な り 進 ん だ と 思い ます 。 で も 、 今 の 私 た ちの ゲー ム の 状態 で は まだ 「 本 当 ] の ゲー 
ム と は いえ ませ ん 。 そ れ よ り は どちら か と いう と 「 玩 具 ] に 近い も の と いえ る で し ょ よう 。 

玩具 に は ルー ル が あり ませ ん 。 | 自由 ] に 楽し め る も の で す 。 一 方 、 ゲ ー ム に は ルー ル と いう | 制約 」 
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が あっ て 、 そ の 目的 を 達成 する こと を 楽し む お も ので す 。 そ こ が 玩 具 と ゲー ム の 根本 的 な 違い と いっ て よい 
で し ょ う 。 と いう こと で 、 現 在 の ゲー ム に さら に ルー ル を 実装 し て いく こと と に し まし ょ う 。 


| ケー ム の ルー ル 
Ri i GPRSS sai (RS) EE (TE EE PE (EI UE EE CE PER] CE EEE EE (= EE ip UE EE ci UE EE IE Parol EE ls (Ed に = コ Pani EE = Op (Pass [EO 

ルー ル は いろ いろ と 考え られ ます が 、 最 初 は で きる だ け シ ンプ ル な と ころ か ら 始 め る の が よい で し ょ う 。 
いろ いろ 進め て いく うち に 、 徐 々 に 拡張 は 可能 で す 。 

今 の ゲー ム に も すでに 実装 し た ルー ル が あり ます 、 そ れ は 「 プ レイ ヤー の ター ン は 交互 に 換わる 」 と い 
う ル ー ル で す 。 

た と えば 、|「 コイ ン で 次 の ター ン が 決ま る 」 や |「 ユ ニッ ト の 素早 さ で ター ン が 決ま る 」 な どの 可能 性 も 
考え られ ます が 、 今 は シン プル に 交互 に 進行 し て いき ます 。 こ の ルー ル を 壊さ ず に 、 今 か ら ユ ニッ ト に パ 
ラメ ー タ を 追加 し て 、 バ トル 、 船 の 沈没 、 そ し て 勝利 条件 を 作り 込ん を で いき ます 。 


、 
[| a 
| ユー ニット の パ バ パラメータ 
の | 
ce {la ee ET [EE EE [EE TE | EE [EE EE =] TEE | CE | FCT | TEE [EE TPE FE | | 1 FE Ps [FE sl 3 ae Te TT {EE = | FS FE FER 時 
シミ ュ レ ーション ゲー ム は ほか の ジャ ン ル の ゲー ム と 比べ て 、 パ ラメ ー タ (各種 の 能力 や 状態 を 示す 値 ) 
が 多い の が 特徴 で す 。 この ゲー ム の パラ メー タ も 多い ほう で す が 、 最 低 限 の も の で 済ま せ て お きま し ょ う 。 
今回 は 次 の よう な パラ メー タ を 用 意 す る こと に し ます 。 


・ 移 動力 (movement) 
・ 攻 撃 距離 (range) 

・ 攻 撃 力 (attack) 

・ 防 御 力 (defense) 

・ 体 力 (hp) 


図 11-1 ユニ ッ ト の パラ メー タ 
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ユニ ッ ト の コン スト ラク タ の 中 で 、 こ ご これ ら の パラ メー タ の 定義 と 初期 化 を 行い まし ょ よう 。 


var Fune = Class.create (Group, { 


initialize: function(id, stats) { 
this,.stats = { 移動 力 
movement: 3, 


range: 3;, 


攻撃 距離 
attack: 100, 
defense: 50, 
hpMax: O00), 


この よう に 書い て お け ば 、 次 の よう に 直接 パラ メー タ に アク セス で きま す 。 
var attack = fune.gstats.attack; 


し か し 、 あ と で 何 が か 仕様 変更 が あっ た ら 困 る の で 、 パ ラメ ー タ に 直接 アク セス する より は メソ ッ ド で ア 
クセ ス す る よう に 書い て お きま す 。 


var attack = fine.qgetAttack() ; 


ゲー ム を 作る と き は 仕様 変更 が 付き 物 で す 。 メ ソ ッ ド で 書い て お け ば 、 パ ラメ ー タ の 値 を その まま 渡す 
以外 に も 、 な に か 加工 を し て 渡す と いう こと も で きる で し ょ う 。 そ れ ぞ れ の パラ メー タ に アク セス する た 
め に メソ ッ ド を 定義 し ます 。 


getMovement: function() { 
return this.stats.movement : 移動 力 を 返す メソ ッ ド 


} / 


getRange: function() { 
: 攻撃 距離 を 返す メソ ッ ド 
return this.stats.range; 


}; 


getAttack: function() { 攻撃 力 を 返す メソ ッ ド 
return this.stats.attack; 
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} / 


getDefense: function() { 


return this.stats.defense; 
} / 
getHPMax: function() { 
return this.stats.hpMax; 


} / 


も HP E ti 。 , 
9e MD 現在 の 体力 を 返す メソ ッ ド 
return this.stats.hp; 


} 


。 
| ーー 
|7 \ ラ メー タ の 表示 
で = = ll = ll = CE 1 ET CE = 1 に = に 3 = に ニー = 本 に 1 [= に li = モニ ll = に 1 EE ET (EE EE EE EE EE EE EE 
ユニ ッ ト に パラ メー タ を 実装 し まし た が 、 今 の と ころ プレ イヤ ー が それ を 確認 する 方 法 が あり ませ ん 。 
そこ で 、 パ ラメ ー タ を 確認 で きる よう に 選択 し た 船 を タッ チ を する と ステ ー タ スウ ィ ン ド ウ が 開く よう に 
し て み ま し ょ よう 。 


る O し [index.html 


を で 円 fle://7Users/robert/Desktop/pirateTactics/enchantjs-builds-0.8.1/game/pirates/14/index.html > 


船長 : キャ プ テ ン 
攻撃 力 : 100 
防御 力 : 50 


移動 力 : 3 
攻撃 の 距離 :3 
HP : 100/100 


まずは 、 空 の ウィ ンド ウ を 表示 する 機能 と 、 そ れ を 閉じ る た め の ボ タン を 実装 し ます 。 
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initialize: function(fune) { 
Scene. call (this) ; 


game . pushScene (this) ; 


var windowGroup = new Group(); 
windowGroup.x = (960 -512)/2; 

windowGroup.y = (640 -512)/2; 

this.addChild (windowGroup) ; 


512x512pxIl の ウィ ンド ウ を 
x 三 224, y ニ 64 の 位置 に 配置 
正方 形 の ウィ ンド ウ が 中 央 に 表 
示さ れ ま す 


var windowSprite = new Sprite(512, 512) / 
windowSprite.image = game.assets[uiWindowSprite] / 


windowGroup.addChild (windowSprite) ; 


Va self 三 上 hg 
var cancelBtnSprite = new Sprite(l28, 64)/ 


cancelBtnSprite.image = game.assets[uiCancelBtnSprite] / 
cancelBtnSprite.x = 64; セル ボタ ン の 配置 

ャ ン セ ル ボ タン 
cancelBtnSprite.y = 512 -96; 
windowGroup.addChild (cancelBtnSprite) ; 


cancelBtnSprite.addEventListener (enchant .Event. TOUCH END, 

function (params) { 
game . popScene () ; ボタ ン が 押さ れ た と き の イ ベン ト ハ ンド ラ を 定義 
if (self.onCancel) { 


self .onCancel ( ) 


hy 
| 


サン プ ブル を 実行 し て みる と 、 こ れ で ウィ ンド ウ が 開閉 で きる よう に な っ て いる は ず で す 。 
次 に ウィ ンド ウ 上 に パラ メー タ を 表示 し て み ま し ょ う 。 数 字 だ け で は 寂し い の で キャ ラク ター も 表示 し 
まし ょ う (サン プル は 、chapter_11 ー 14 に あり ます )。 
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船長 : キャ プ テ ン 
攻撃 力 : 100 
防御 力 : 50 


移動 力 : 4 
攻撃 の 距離 :3 
HP : 120/120 


前 略 
var windowSprite = new Sprite(512, 512); 
windowSprite.image = game.assets[uiWindowSprite] ; 


windowGroup .addChild (windowSprite) ; 


var statsGroup = new Group(); 
statsGroup.x = 64; 

statsGroup.y = 32; 

windowGroup .addChild(statsGroup) ; 


var i iontColori= ‘rgbal255, 255。 105, 1.0)“: 


captainLabel = new Label ("船長 : "+fune. getCaptainName ( ) ) ; 


statsGroup.addChild (captainLabel) ; 
captainLabel & =ー 0 船長 の 名 前 を 表示 


captainLabel.y = 0; 
captainLabel.font = fontStyle; 


captainLabel.color = fontColor; 


attackLabel = new Label (" 攻撃 力 : "+fune. getAttack() ) : 


statsGroup. addChild (attackLabel) ; 
attackLabel.x = 0; 


attackLabel.y = 64 *1; 
attackLabel .font = fontStyle; 
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attackLabel.color = fontColor; 


中 賠 ほか の パラ メー タ も 同じ よう に 実装 し て いき ます 


hpLabe1 = new Label("HP: "+fune. getHP ( ) +" /"+fune. getHPMax ( ) ) ; 
statsGroup .addChild (hpLabel) ; 

hpLabel.x = O0; 

hpLabel.y = 64 *5; 

hpLabel.font = fontStyle; 


hpLabel.color = fontColor; 


var pirate = new Sprite(400, 640); 


pirate .opacity = 0; ー a 
pirate.x = 400; Ea iain 
pirate.y = -50; 


pirate.image = game.assets[pirateSprites[0]1]; 


windowGroup.addChild (pirate) ; 


さら に 、GameMap を タッ チ す る と ウィ ンド ウ を 閉じ る よう に し ます 。 


ontouchend: function(params) { 


if (this.player.isActive()) { 


if (this.player.getActiveFune() == this) { 
var popup = new StatusWindow(this) ; 
popup . onCancel = function() { 


// ウ ヴィ シド 9 は 閉じ まし た 
} 
} else { 
this.player. setActiveFune (this) ; 
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ユニ ッ ト パ ラメ ー タ 


し 
| ーー 本 
( が | ユニ ッ ト の 種類 を 増やそ う 
で 。=: 6 = i EE = ョ = EE = = = = = = EE = = EE = = ョ = だき = = = = EE i: = (= = = に = に = = = *= き = 
これ まで の 実装 で 、4 つ の 船 を 用 意 し て いま し た 。 で も 、 ど れ も 同 じ パ ラメ ー タ を 持っ て いま し た 。 本 
来 は 船 の 種類 は 4 種類 で 4 つの ユニ ッ ト あ る は ず で す 。 そ こ で それ ぞ れ の ユニ ッ ト を 次 の よう に 実装 し ま 
す 。 


図 11-2 各 ユ ニッ ト と その パラ メー タ 


どれ も 基本 的 な 部 分 は 同じ で す が 、 ち ょ っ と ず づ 特徴 が 異な り ま す 。 こ と うい う 場 合 、 オ ブ ジ ェクト 指向 
で は ベー ス (基本 ) クラ ス を 作り 、 そ れ ぞ れ の ユニ ッ ト ク ラス は ペー ス を 継承 し て 実装 し ます 。 
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BaseFune 


CaptainFune HayaiFune KataiFune KougekiFune 


図 11-3 ユニ ッ ト の クラ ス ツ リ ー 


まず 、 今 の 船 の クラ ス を 汎用 的 な 名 前 |[BaseFune」 に 変え ます (サン ブル は chapter_11 っ 15 に あ 
り ま す )。 


var BaseFune = Class.create(Group, { 
initialize: function(id, stats) { 


Group.call (this) / 


それ ぞ れ の 船 は この 基本 クラ ス を 継承 し て 作り ます 。 実 際 は どの 船 も 同じ よう な 作り 方 に な り ま す の で 、 
こと こと で は 1 つ だ け 、 キ ャ プ ブテン の 船 の 作り 方 を 見 て み ま し ょ う 。 変 更 を 加え る の は お も に パラ メー タ の 部 
分 で す 。 
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ユニ ッ ト パ ラメ ー タ 


var CaptainFune = Class.create (BaseFune, { 
initialize: function(id) { 
BaseFune. call (this, id, { CaptainFune を 作る 
movement: 3, 
range: 3, 


defense: 50, 


hpMax: 100, 

+2 

も お ig EGG franme = [0, 0, 1, 1, .2, 1, 0。 0。 3, 31; 
} , 
getCaptainName: Euno モ on() { eS 。 6 

= 名 前 を 返す メソ ッ ド 

Se も un "キヤ ブテン" 

} 


PS 


あと は 残り の 3 つの 船 を 同じ よう に 作り こん で いき ます 。 ゲー ム の 初期 化 時 の 船 の 割り 当て を 変更 し て 、 
それ ぞ れ の プレ イヤ ー に 4 種類 の 船 を 持た せま す 。 


に O 6 | index.html 


で |[y fle:///Users/robert/Desktop/pirateTactics/enchantjs-builds-0.8.17game/pirates/157Index.html YY 
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| | Cha pt ¢ 
= 0 f 


7 = 、 WW 4 A 
> 4 ペ 4 
y _ ee - 
K { i F + 
3 の Np 


式 を 作り こみ まし ょ う 、 
た だ し 式 自体 は と て も 
か ん た ん で す 


dm ー ジ の 表現 、 船 
の : 没 な ど は スプ ラ 
イト の アニ メー ショ 
ン で 表現 し ます 


いよ いよ 戦闘 の 処理 を 
作っ て み ま し ょ う 。 攻撃 
力 に ラン ダム 性 を 加え る 
こと で 、 ゲ ー ム らし さ が 生 
ぐっ と 境 し ます よ 


| 勝利 者 を 確定 する 処理 を 作り 較 
| 込ん で 、 表示 させ まし ょ う 


本 章 で 勉強 する こと 


@ ユ ニッ ト 同 士 の 対戦 時 の ルー ル を 考え て み @ 爆発 や 船 が 沈む お な どの アニ メー ショ ン を 加 
よう えよ う 


@ ク リティ カル ヒッ ト 、 ミ ス な どの ラン ダム @ ユ ニッ ト が 全 減 し た ら 終 了 す る よう に し 
な 要素 を 入れ る と ゲー ム が 面白 く な り ま す て 、 ゲ ー ム を 完結 させ よう 


ィ 、 寺 SN 
"。 0 つ 
| 間 


ア 


C の l | 戦 闘 解 決 の ルー ル 


es 


= 


EE EE ーー ド 天下 a | EE EE EE ーー 本 


i ッ ト に パラ メー - タ が 付き まし た の で 、 い よい よ 対戦 用 の 機能 の 実装 に 入れ る よう に な り ま し た 。 攻 
撃 ル ー ル の 再 確認 と 細か い 部 分 の 仕様 を 決め て か ら 、 実 装 に 入り ます 。 ま ず は ルー ル を 確認 し まし ょ う 。 


対戦 ロジ ッ ク を 作る 


ルー ル 1 : ダメ ー ジ 計算 

タダ メー ジ の 計算 式 は 次 の よう な シン ブル な も の に な り ま す 

自分 の 攻撃 力 - 相手 の 防御 力 = ダメージ 

算出 され た ダメ ー ジ は その まま 相手 の HP か ら 引 き 算 を し ます 。 相手 の HP が 0 に な っ た ら 船 は 沈没 で す 。 
ルー ル 2 : ダメ ー ジ に ラン ダム 性 


シミ ュ レ ーション ゲー ム で すか ら 、 タ ダメージ に は 偶然 に よる ちょ っ と し た に ば ら つ き を 付け た いと 思い 
ます 。 ど れ く らい の ば ら つ き を つけ る か は ゲー ム バ ラン ス の キモ に な り ま す が 、 一 般 的 に ば ら つ き の 幅 が 
広い と 戦略 が 立ち に くく な り ま す 。 シ ミュ レー ショ ン ゲ ー ム の 場合 は お よそ 5 ~ 20%% の ば ら つ き を 採用 
する 場合 が 多い と 思い ます 。 今回 は と りあ えす 無難 な 10% の ば ら つ き で 行き まし ょ う 。 


攻撃 力 に は 10% の ば ら つ き が ある 


いま は 10% に し ます が 、 今後 自分 で いろ いろ な バラ ンス を 試し て みて 、 体 感 的 な 影響 を 確認 し て みる 
と よい で し ょ よう 。 


ルー ル 3 : クリ ティ カル ヒッ ト 


シミ ュ レ ーション や RPG の 定番 と も いえ る 、 運 が 良い と き の ク リティ カル ヒッ ト も 欲し いで すね 。 

クリ ティ カル ヒッ ト の 効果 は ゲー ム に よっ て さま ざま で す が 、 今 回 は 、 運 が 良い と き に 相手 に 与え る ダ 
メー ジ が 2 倍 に な る と いう よく ある パタ ー ン で いき まし ょ う 。 ど れ く らい の 確率 で 発動 する の が 適切 か は 
分 か り ま せん が 、 今 回 は 、 


10% の 確率 で ダメ ー ジ が 2 倍 
と いう クリ ティ カル ヒッ ト が 発生 する よう に プロ グラ ム し ます 。 
ルー ル 4 : 攻撃 が 失敗 する こと も ある 


攻撃 が 確実 に 当たる と 緊張 感 が 削 が れ ま す の で 、 た ま に 攻 撃 ミ ス (失敗 ) が 起き る よう に し ます 。 ミ ス 
も クリ ティ カル ヒッ ト と 同じ く 10% で いき まし ょ う 。 


10% の 確率 で 攻撃 ミス 


これ で 基本 的 な 戦闘 解決 の ルー ル は 決ま り ま し た 。 そ れ で は プロ グラ ミン グ に 入り まし ょ う 。 
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! バト ルル ー ル の 実装 


に トー トー に トー に に トー トー トー ニニ に ニニ ニニ に ニニ に 


バト ル の 実装 は 基本 的 に 2 つ に 分 け ま す 、 攻 撃 の ダメ ー ジ を 計算 する メソ ッ ド (attackFune) と ダメ 
ー ジ を 受け る メソ ッ ド (takeDamage) で す (サン ブル は chapter_12 - 16 に あり ます )。 

最初 は さき ほど の ルー ル を 実装 し た attackFune か ら 作 り 始 め ま す 。 こ ご の 関数 が 基本 的 に ダメ ー ジ を 計 
12 算 す る メソ ッ ド に な り ま す 。 


a 七 上 aokFune: function(otherFune) { 


var damage ; 攻撃 力 か ら 基本 ダメ ー ジ を 算出 


Var PaseDamage = this.getAttack 7 th anaom は 0 て 1 の 範囲 で 乱数 を 発生 させ る 
-0.5 す る こと で -0.5~0.5 の 範囲 に な る 


var variableDamage = (baseDamade /10) * variance; 


基本 ダメ ー ジ の 1/10 に 対し て 乱数 を 適用 し 補正 値 を 出す 


var attackRoll = Math . random() ; 


var variance = Math. random() -0.5; 


// グリ ティ カル ヒッ ト 10% 

の // さ ス HO0* 

if (attackRoll > 0.9) { 
// クリ ティ カル ダメ ー ジ x2 
damage = (baseDamade +variableDamage) *2; 

} else if (attackRoll < 0.1) { < attackRo11 が 0.1 未 満 な ら ミ ス 
// ミス ダメ ー ジ 0 


damage = 0 
} else { 
damage = baseDamage +variableDamage ; 
} 
小数 部 分 を 切捨て 


damade = Math.ceil (damaqe ) 
var beforeHp = otherFune . す etHP () / 


yar self = this: takeDamege メ ソ ッ ド 呼出 し 


otherFune. takeDamage (damaqde , function(afterHp) { 


ダメ ー ジ を 受け た あと の コー ル バ ッ ク 


} ) 


次 は attackFune で 計算 され た ダメ ー ジ を 受け る takeDamages の メソ ッ ド を 実装 し ます 。 
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対戦 ロジ ッ ク を 作る 


ダメ ー ジ 値 か ら 防御 力 を 引く 。 1 未満 の と き は 1 と する 


var ao 上 ua1Damage = Math.max(damage - モ hrs.detDefEense() , 1); 


th s . s モ as . hp -= aotua1Damage < 半 体力 か ら ダ メー ジ を 引く 


var self 三 も h エ Ba/ 


takeDamagde: function(damage, onEnd) { 


onEnd ( ) : < 処理 が 終っ た の で コー ル バ ッ ク を 呼ぶ 


} 


今 の と ころ は 非常 に シン ブル で す が 、 こ の あと だ ん だ ん 処理 が 増え て きま す 。 


Nb 

ー 上 

| 攻撃 の 距離 を 確認 する 

ーー に ーー 6= デ 1 ーー に) ーー ーー ーー に ーー (デー ビーゴ ビー = ピーコ ーー [デコ ミー ーー 「 ーー ーー | ビー デー に = ビー (= に 

それ ぞ れ の 船 に 攻撃 距離 の パラ メー タ が あり ます の で 、 そ れ に 従っ て 攻撃 し た い 相 手 と の 距離 を 計算 し 、 

攻撃 で きる か どう か を 確認 し て か ら 処 理 に 入り ます 。 YithinRanges の メゾ ソ ッ ド を ベー スク ラス に 追加 し 、 
マッ プ の タッ チイ ベン ト で 確認 し て か ら attaokEune を 呼び ます 。 withinRange は 次 の よう な 実装 に な 
り ま す 。 


withinRange: function(i, ]) { 
var distance = utils.getManhattanDistance (this.1i, this.J], I, ])/ 
console.log ("withinRange", "distance", distance, "range'", 
this. stats. range, distance <= this.stats.range) ; 


if (distance <= this.stats.range) { 


return true; 震 攻撃 範囲 内 な ら true を 返す 


} else { 


return false; 涯 攻撃 範囲 外 な ら salse を 返す 


そし て GameMap の ontouchend の 中 に 攻撃 の 操作 を 組み 込み ます 。 


ontouchend: function(params) { 


if (this.player.isActive()) { 
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} else { 
var activePlayer = this.player.controller.getActivePlayer() / 
var activeFune = activePlayer.getActiveFune() ; 


if (activeFune.withinRange (this.i, 上 h1s.])) { 


activeFune.attackFune (this) ; 


) 処理 を 実行 する 
} 


| HP ゲー ジ を 作り まし ょ う 


ea [Ti] TO FOE CE To (ET EE FE] FE (al I = (i = = I] CO [a 1 [On "= [Fe [a TOE [FE 1 [OE i iam Ya a RE (EC = CE EO) 
攻撃 の あと は 残り HP を 簡単 に 確認 し た い の で HP の ゲー ジ を 作り ます (サン プル は chapter_12 っ 17 
に あり ます )。 


と の よう な ゲー ジ は 実際 3 つの 画像 か ら 構成 し て いま す 。 バ ッ ク の 画像 、HP の 残り を 示す 緑 、 ダ メー 
ジ を あら わす 赤 で す 。 状 況 に 応じ て この 画像 を 変形 し て ゲー ジ を 表現 し ます 。 
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対戦 ロジ ッ ク を 作る 


緑 (uiHea1thGreen ) 
赤 (uiHea1thRed) 
黒 (uiHea1thBack ) 


図 12-1 ゲー ジ の 表示 の 仕組 み 


最初 は 簡単 に この 3 つの 画像 で Bassguns に HP の ゲー ジ を 作り まし ょ う 


var BaseFune = Class.create(Group, { 


initialize: function(id, stats) { 


中 賠 

var healthBackSprite = new Sprite(64, 12); 
this.healthBackSprite = healthBackSprite; 
healthBackSprite.image = game.assets[uiHealthBack] ; 
healthBackSprite.x = 16; 

healthBackSprite.y = 96 -12/ 


this.addChild (heal thBackSprite) ; 


var healthRedSprite = new Sprite(64, 12); 

this.healthRedSprite = healthRedSprite; 

healthRedSprite.originXx = 0 

healthRedSprite.image = game.assets[uiHealthRed] / 
healthRedSprite.x = Ge 

healthRedSprite.y = 96 -12; 


this.addChild (heal thRedSprite) ; 


var healthGreenSprite = new Sprite(64, 12); 
this.healthGreenSprite = healthGreenSprite; 
healthGreenSprite.originXx = 0 

healthGreenSprite.image = game.assets[uiHealthGreen] / 
healthGreenSprite.x 三 16: 

healthGreenSprite.y = 96 -12:/ 

th s . addCh+1d (heal thGreenSprite) ; 
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さき ほど 作っ た takesDamages の メゾ ッ ド 内 で ゲー ジ の 状態 を 計算 し て 更新 する よう に し ます 。upaate 
HPBar を 呼び 出し ます 。 


takeDamade: function(damage, onEnd) { 
var aotua1Damaqge = Math .max (damade -this.getDefense(), 1)/ 
this.stats.hp -= actualDamage / 
var self = this; 
this.updateHPBar (function() { 
onEnd()/ 
}) ) 


updateHPBar は 次 の よう に な っ て いま す 。 


タダ メー ジ の 割合 を 計算 


var ratio = Math .max( モ hs .getHP() / this.getHPMax(), 0): 
rittatio デ 0 。5》 1 { 


this.healthGreenSprite.scaleXx = ratio; 割合 に 合わ せ て ゲー ジ を 縮小 


updateHPBar: function(onEnd) { 


} else { 
this.healthGreenSprite.scaleXx = 0; 


ヒッ ト ボ イン ト が 半分 を 切っ て いれ ば 
緑 の ゲ ー ジ は 表示 させ な い 
} 


this.healthRedSprite.scaleXx = ratio; 赤い ゲー ジ を 縮小 する 


onEnd() ; 


| 攻撃 の エフ ェクト 


コト ーー トー トーー ト ーー トー! ドーー ト ーー トーーー に ーー バト ーー オニ ーー キー に ーー トニ ーー キーー ーー トニーーー オ ーー パニ ーー トーーー ト ーー スーー ト ーーー ーッ: ーー キーーー ト ーーー オーーー ニ ーー ニーーー ーー ニート ーー ニー ーーー ニ サニー キー 


ロジ ッ ク の 実装 さえ で きれ ば いち お う 遊 べ ま す が 、 そ れ だ け だ と プレ イヤ ー に 分 か り に くい の で 攻撃 が 
当たる と ダメ ー ジ を 数 字 化 し た 表現 を 画面 に 出す よう に し ます 。 ち ょ っ と し た 爆発 の アニ メー ショ ン を 再生 
し まし ょ う (サン プル は chapter_12 一 18 に あり ます )。 


スス メ スル メ メル k ム メス ルミ メル トメ スル トミ メス ルミ メス ルミ メメ メル トミ メル トミ メル トメ メル メ メル メ スルメ メル メ スルメ メス ルミ メル K メル K スル ミ 1) 


対戦 ロジ ッ ク を 作る 


Sprite を 継承 し た 爆発 の クラ ス を 定義 し ます 。 


var Explosion = Class.create(Sprite, { 爆発 クラ ス 
initialize: function(id, stats) 人 { 


Group. Ga ル L1 (Ehis 。 32。 32) ; 


hs . 1made = game.assets[shipsSpriteSheet] / 
thisifirames 三 TO 1 2 3 う 。0 1;72,3, 0 1 2 3,4 Snull]; 
this.counter = 0; 


}, 


onenterframe: function() { 最後 の フレ ー ム に な っ た ら ス プラ イト を 消す 


this.counter++; 
if (this.counter == this.frames.length -1] ) { 
this.parentNode. removeChild(this) ; 


takeDamage の あ と に explosion を 実行 し ます 。 ア ニメーション が 終っ た ら 上 自分 で cemoveChi1a を し 
て くれ る の で 、 終 了 の た め の 処 理 は 書か が の な く て も 大 丈夫 で す 。 


a 七 上 aokE'une: function(otherFune) { 
中 賠 


otherFune .t 上 akeDamaqe (damage, function() { 


var explosion = new Explosion(); 爆発 を 呼び 出す 


game . currentScene. addChild (explosion) ; 


explosion.x = otherFune.x; 
explosion.y = otherFune.Yy; 


} ) 


し 
| 
wh 
| 船 の 沈没 
= 
ゲー ジ は で きま し た が 、 現在 の 状態 で は ある 船 の HP が ゼロ 以下 に な っ て も 終わ ら ず 、 そ の まま 戦い 続 
け ま す 。 そ こ で 、HP が 0 に な っ た と き に 船 が 沈没 する よう に し まし ょ う 。 
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これ は 爆発 と 同じ よう に アニ メー ショ ン を 一 度 だ け 実 行 し ます 。 フ レー ム ご と に アニ メー ショ ン を 進め 


て 行き ます 。 


sinkShip: function(onEnd) { 
this ., trames = [4;4 4 5 5.6,6, 7 , 7,B,Bj : 水没 アニ メー ショ ン を 表示 し ます | 
this.counter = 1 
this.onenterframe = function(){ // enterframe event listener 
this.counter++; 
if (this.counter == this.frames.length ) { 


アニ メー ショ ン が 完了 し た ら 、 船 は ゲー ム か ら 
外し て 次 の プレ イヤ ー に ター ン を 回 し ます 


this.player.removeFune (this) ; 


this.parentNode. removeChild(this) ; 
onEnd() / 


mA 
os 

(| 勝利 条件 
人 ii 

現在 は どちら か の 船 が 全 減 す る まで は 遊べ ます が 、 実際 の 勝利 条件 は プロ グラ ム し て いな い の で 、 そ の 
後 ゲ ー ム は 進行 不能 の 状態 に な り ま す 。 そ れ を これ か ら 直 し まし ょ う (サン ブル は chapter_12 20 に 
あり ます )。 

基本 的 に シミ ュ レ ーション ゲー ム に は 勝利 条件 が あり ます 。 

た ま に ミ ッ シ ョ ン が 終了 条件 な し に 続く ケー ス も あり ます が 、 ほ と ん ど は 相手 を 全滅 する か 、 何 か の 目 
標 を 達成 すれ ば 終了 し ます 。 今回 の ゲー ム は シン プル に し て お きた い の で 勝利 条件 を 全滅 だ け に し ます 。 
いま の ゲー ム の 作り だ と 勝利 条件 を 一 番 適切 に 確認 で きる の は nextrurn の 中 で す 。 

@ $e を ee を ee を ee を ee を ee を ee を ee ee ee を ee を ee を ee を ee を ee を $e を ee を ee を pe $$ 


対戦 ロジ ッ ク を 作る 


endTurn: function() { 
var player = this.getActivePlayer() / 
player. setActive (false) ; 


var winner = this.getWinner() ; 勝利 者 が いる か 調べ る 
i (いた 場合 ) 勝利 者 表示 用 の 
var playerBanner = new Sprite(512, 256); スプ ライ ト を 作る 


| プレ イヤ ー 1 を セッ ト 
if (player.id == 1) { 


playerBanner.image = game.assets[uiPlayerBannerl] ; 


} else if (player.id == 2) { 


playerBanner.image = game.assets[uiPlayerBanner2] ; 


} 
プレ イヤ ー 2 を セッ ト 


playerBanner.opacity = 0; 


playerBanner.x = 480 -256; 
プレ イヤ ー 名 を 表示 
playerBanner.y = 320 -128; 


game . currentScene.addChild (playerBanner) ; 


var resultBanner = new Sprite(512, 256); = = 

| Win を 表示 
resultBanner.image = game.assets[uiWin] ; 
resultBanner.opacity = 0; 


resultBanner.x = 480 -256; 
resultBanner.y = 320 -128; 


game . currentScene . addCh+1d (resultBanner) ; 
} else { 勝利 者 が いな けれ ば 
this.turnCounter++; 


var playerBanner = new Sprite(512, 256); 


if (player.id == 1) { 
playerBanner.image = game.assets[uiPlayerBanner2] ; 
} else if (player.id == 2) { 


playerBanner.image = game.assets[uiPlayerBannerl] ; 


} 
プレ イヤ ー 名 を 表示 し て 


playerBanner.opacity = 0; 
playerBanner.x = 480 -256; 
playerBanner.y = 320 -128: 


game . currentScene.addChild (playerBanner) ; 


this. startTurn() ; 
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utils.endUIShield() ; 


game . currentScene. removeChild (playerBanner) ; 


12 getWwinner で は どちら か の プレ イ ヤー の 船 が 0 に な っ た か どう か を 調べ 、 条 件 を 満た し た ら 勝 利 者 を 
返 し ます 。 


getWinner: function() { 
if (this.getActivePlayer() .getFuneCount() == 0) { 
if (this.getNonActivePlayer() .getFuneCount() == 0) { 


return this.getActivePlayer(); 
a 現在 の プレ イヤ ー の 船 が 0 で 


相手 も 0 な ら 自 分 の 勝利 
return this.getNonActivePlayer(); 


} そう で な けれ ば 相手 の 勝利 


} else if (this.getNonActivePlayer().qgetFuneCount() = ニニ 


は 
7 
4 
| 


return this.getActivePlayer(); 


相手 の 船 が 0 な ら 現 在 の プレ 


] 


return null 勝利 者 は いま せん 


イヤ ー の 勝利 
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対戦 ロジ ッ ク を 作る 


ss 
| ゲーム を 再 凍 
= = 
勝利 者 が 確定 する と ゲー ム が 進行 不能 に な り ま す 。 問 題 は 終了 後 何 も す る こと が な いこ と と で す 。 本 当 は 
いろ いろ な 画面 と ロジ ッ ク で ゲー ム を 初期 状態 に 戻し て 再開 する と よい の で す が 、 実装 する と 複雑 で は な 
いわ り に た くさ ん の コー ド を 説明 し な けれ ば な り ま せん 。 
ゲー ム の キャ ン ペ ー ン モー ド に つい て は 今後 バー ト 4 で 対応 する 予定 で す の で 、 こ の 時 点 で は ブラ ウザ 
機能 を 活か し て 、 終 了 後 、 画面 を タッ チ し た ら Web ペ ー ジ を リロ ー ド する よう に し て み ま し ょ う 。 


合 ¢*| ゞ | 


GAME OVER 


図 12-2 ゲー ム の 終了 と 再読 み 込 み 


endTurn: function() { 
var player = this.getActivePlayer() / 
player. setActive (false) ; 


var winner = this.getWinner(); 
if (winner) ( < 勝利 者 が いれ ば | 

中 略 

location.reload() / 
} else { 


ここ まで で ゲー ム が 終了 し 、 再 開 す る まで を 一 通り 作る こと が で きま し た ! 
で も 、 見 栄え の 良い ゲー ム に する に は まだ まだ や る こと あり ます 。 本 書 の パー ト 3 で は 、 一 度 完 成 し た 
ゲー ム に さま ざま な エフ ェクト を 加え る な どの 改良 を 行う こと に し ます 。 
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エフ ェクト を 追加 し よう 


Chabter13 | 歌 快感 アッ プ ! 
N / NN 
ーーGhapter14 ヽ サウ ンド 


/ 


ンー 
\ se 
Chapter15 / マッ プ の 影響 を 受け る ンタ 


必殺 技 を 作る 


N 9 Japter1G 
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船 が 一 瞬 で 移動 する の 
で は な く 、 距 離 に あわ 
せ て 一 定 の リズ ム で 動 
く よ う に し ます 


ペー ン メ ッ セ ー ジ や ス 
3 骨 テー タス ウィ ンド ウ は 

ノエ ェ ー ド イン 、 フ ェ ー 
ドア ウト する よう に し 
ます 


プレ イヤ ー の 操作 に 
リア クシ ョ ン を 加え 
さ が ア ッ プ し ます 


っ の 


吊 船 ユニ ッ ト の 動き も 改 
善 し ま し ょ う 。 重なり 
方 が 常に 正しく な る よ 
うに コー ド に 手 を 加え 
ます 


本 章 で 勉強 する こと 
@ シン プル な ゲー ム で も 作り 込み が 良い と 、 @ イ ー ジ ング (easing) を 使っ て 動き に 変 
爽快 感 ア ッ プ 化 を も た せま す 
@ enchant.js の Timeline ア ニメーション @ スプ ライ ト の 重なり 方 を 正しく する 方 法 を 
機能 を 活用 し よう えよ の 


ゲー ム を 作っ て いる と 「 爽 快感 が 大 切 ]」 と よく 聞き ます 。 ゲ ー ム を 進め る の が 心地 良い と 、 ユ ー ザ ー が 
積極 的 に どん どん ゲー ム を 進め て くれ ます 。 で も 、 爽 快感 と は どん な も の な の で し ょ うか ? と きど き 「 爽 
快感 は 派手 さだ ! 」 と 言う 人 も いま す が 、 た だ の 派手 さだ け で は 爽快 感 に 繋が ら な い は ず で す 。 

ゲー ム の 爽快 感 と は 操作] に 対す る [反応] の 面白 さと も 言え る の で は な いで し ょ うか 。 操作 に 対す 
る 反応 が 適切 で あれ ば 、 ゲ ー ム は さら に 楽し く 、 分 か り 易 く な り ま す 。 


爽快 感 ア ッ プ ! 


プレ イヤ ー 


図 13-1 アク ショ ン と リア クシ ョ ン 


いい 
1 
(| 爽快 感 と 磨き 
= i 5 a es Dd I a = = EH = = = = I = = a = a 
爽快 感 の ある ゲー ム は 「 磨 か れ て いる 」 と も いい ます 。 磨 き は ゲー ム に と っ て は プラ ス a 的 な も の で し 
か な いか も し れ ま せん 。 し か し 、 た と えど ん な に シン プル な ゲー ム で も し っ か り と 磨 か れ て いる と 、 そ れ 
な り に ちゃ ん と し た ゲー ム に 見 えま す 。 逆 に いく ら よ く 考 えら れ た ゲー ム で も 、 磨 き が 足り な いと 地味 に 
見 え 、 ほ と ん どの 人 か ら は あま り 評 価 さ れ ま せん 。 


し 
1 @ @ ーーー » » 
( が | enchant.js の Timeline ア ニメーション 
= = 
ゲー ム の 爽快 感 を 上 げ る 手段 は た くさ ん あり ます が 。 今回 は 誰 で も で きる 簡単 な 手段 で ゲー ム の 爽快 感 
を 改善 し た い の で 、enchant.js の Timeline ア ニメーション と いう 機能 を 紹介 し た いと 思い ます 。 
Timeline は あま りく どく ど と 説明 を する より は さっ そく 使っ て みた ほう が 理解 し や すい で し ょ う 。 た と 
えば 、 あ る スプ ライ ト を 30 フ レー ム の あい だ に x 軸 方 向 に プラ ス 100 動 か し た いと き 、 


mySprite.tl .moVeBy(100, 0, 30)/ 


と 記述 し ます 。 こ うす れ ば 毎 フ レー ム に つき rrysprite は x 軸 方 向 に 3.333 ず つ 動 きま す (100/30frame 
= 3.333.…) 。 


X:100,Y:0 


図 13-2 Timeline に よる xX 軸 方 向 へ の 動き 
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船 を 図 の よう に Y 方 向 に も 動か し た けれ ば 、 moveBy を 連続 し て 使い ます 。 
mySprite.tl.moveBy (100, 0, 30) .moveBy(0, 100, 30)/ 
こう すれ ば X を 100 移 動 し た あと に Y を 100 移 動 し ます 。 


XxX:100,Y:100 
図 13-3 X 軸 プ Y 軸 の 動き の 組み 合わ せ 


アニ メー ショ ン と アニ メー ショ ン の あい だ に ちょ っ と し た 停止 期間 を 作り た いと き は adelay () を 使え 
ます 。 た と えば 、X 軸 方 向 の 移動 の あと 10 フ レー ム の あい だ 動き を 止め る た め に は 、 


mySprite.tl.moveBy (100, 0, 30).delay (10) .moveBy(0, 100, 30); 
と 記述 し ます 。 ア ニメーション を 同時 に 2 つ 連 携 し て 動か し た いと き は .ana() を 使い ます 。 
mySprite.tl.moveBy (100, 0, 30) .and() .rotateBy(90, 30)/ 


こう する こと で 、% 軸 方 向 と Y 軸 方 向 同時 に 、 ユ ニッ ト が 終 め に 動い て いき ます 。 


rotateBY(90.30) 


図 13-4 船 ア イコ ン の 回 転 
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爽快 感 ア ッ プ ! 


Timeline の も う ひ と つの 重要 な 機能 は 、 移 動 が 終っ た と ころ で な に か 別 の 処理 を 実行 で きる .thsn () 
で す 。 ご これ を 使う と 移動 後に 自由 な 処理 を 実行 させ られ ます 。 


mySprite. tl .moVeBy(100, 0, 30) . も then (function() { 


SCene . エ emo び eCh+1 1d (mySprite) ; 移動 を 終っ た ら ス プラ イト を 削除 し ます 
} ) 


最後 に 説明 し た い Timeline の 機能 は イー ジン グ クタ (Easing) で す 。 こ こま で の 変更 は 毎 フ レー ム 同 じ 量 
で し た が 、 イ ー ジ ング で だ ん だ ん 早く な る 、 ま た は だ ん だ ん 遅く な る な どの アニ メー ショ ン が 作れ ます 。 


this.tl .moveTo(100, 0, 30, enchant.Easing. QUAD EASEIN) 


上 記 の 場合 X の 移動 ス ビ ー ド は 直線 で は な く 、 だ ん だ ん と 早く な り ま す 。 

動き の 種類 は ouap (緩やか に な る )、 BouNcE (跳ね る )、Erasrrc (行き 過ぎ て 戻る う ) が あり 、「_」 ( ア 
ンダ ー ス コア ) で つない で 、FEASEIN (動き の 始め )、EgAsgour (動き の 終わ り )、EASEINOUT (両方 ) 
を 指定 する 方 式 に な っ て いま す 。 


マ 表 13-1 イー ジン グ の 設定 


easeIn easeOut easeInOut 


= っ ee O011a ュ dd eacelnO0itit0O01ia 
i し dO ニス ニー ニニ ュー ュー 


2 a 2 


easeInBounce easeOutBounce easeInOutBounce 


enchant.js で イー ジン グ に 設定 で きる 式 は た くさ ん あり ます が 、 一 気 に 覚 える 必要 は あり ませ ん 。 使 
っ て いる うち に 覚え て いけ ば よい で し ょ う 。 ま た 、 ほ と ん どの フレ ー ム ワー ク や エン ジン で は 同じ よう な 
イー ジン グ の カー ブ が 指定 で きま す 。 

ここ まで 見 た Timeline の 機能 を 使っ て ゲー ム の 爽快 感 を 改善 し て いき まし ょ う 。 
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に 
| 
[ UI の 改善 
人 
最初 は 簡単 な と ころ か ら 始 め た い の で UI の 改善 を し まし ょ う 。 タ ー ン が 変わ る と き の メ ッ セ ー ジ を フ 
ェ ー ド イン する よう に し ます (サン プル は chapter_13 っ 20 に あり ます )。t1 に 対し て faaern (フレ 
ー ム 数 ) と いっ た 形 で 指定 し ます 。 


endTurn: function() { 


var player = this.getActivePlayer() / 


player.setActive (false) ; 


var winner = this.getWinner() ; 勝者 を 取得 


if (winner) { 


} else { 勝者 が まだ いな けれ ば 


いい 2 \ ゃ と 
var self = this; メッ セー ジ の フェ ー ド イン と アウ ト を 指定 


playerBanner.tl.fadeIn(10) .delay(15) . fadeOut (5) .then (function() { 
self.startTurn(); 
utils.endUIShield() ; 
game . currentScene . removeChild (playerBanner) ; 


} ) 


サン プル で は uti1s.beginUTShie1d と ut 1s . 
endUrShield と いう メソ ッ ド が 新た に 作ら れ て いま 
す 。beginUTShie1d を 実行 する と 、 目 に 見 えな い 
(opacity = 0 の ) スプ ライ ト が ゲー ム 画 面 全体 を 覆 
っ て 、 プ レイ ヤー の 操作 を 遮断 し ます 。 こ れ は モー タダ ル 
シー ルド と いう 手法 で す 。 モ ー タ ダル (modal) は 「 モ ー 
ド (mode) が ある 」 と 言っ た 意味 で 、 モ ー ド が 切り 替 
わる と 適切 な 応答 が 返る まで プレ イヤ ー に 操作 を させ な 
いよ うに し て いま す 。snaurshie1a メ ゾ ッ ド を 実行 
る と シー ルド が オフ に な り ま す 。 
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爽快 感 ア ッ プ ! 


勝利 メッ セー ジ も フェ ー ド イン プア ウト で ポッ プア ッ プ する よう に し ます 。 


endTurn: function() { 
var player = this.getActivePlayer(); 
player. setActive (false) ; 


var winner = this.getWinner(); 


if (winner) { < 勝者 が 確定 し て いれ ば 
ーー プレ イヤ ー 名 を フェ ー ド イン ノア ウト | 
var self = this; 


playerBanner.tl.fadeIn (10) .delay (15) .fadeOut (5) .then (function() { 13 


game . currentScene. removeChild (playerBanner) ; 


var resultBanner = new Sprite(512, 256); 
resultBanner.image = game.assets[uiWin] ; 
resultBanner.opacity = 0; 「Wins」 と 表示 する 


resultBanner.x = 480 -256; メッ セー ジ を 作り 


resultBanner.y = 320 -128; 


game . currentScene.addChild (resultBanner) ; 


resultBanner.tl.fadeIn(10) .delay(45) .fadeOut(5) .then(function() { 


location. reload() ; 
フェ ー ド イン ノア ウト させ ます 


Py 


9 0 0 / imdex.hrml 


を ご で 1 file:///Users/robert/Desktop/pirateTactics/enchant.js-builds-0.8.1/game/pirates/20/index.html < 王 


プレ イヤ ー1 ター ン :10 
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ステ ー タ スウ ィ ン ド ウ の 表示 に も イー ジン グ を 追加 し まし ょ う 。 ス テー タス ウィ ンド ウ を 開く と き は だ 
ん だ ん と 現れ る よう に し て 、srAsTrC_EASEOUT を 指示 し ます (サン ブル は chapter_13 っ 21 に あり ま 
す )。 


SC る htmpe:ywww amazDau CoJ、 x imoexmml SS (1 


を ご CQ | 円 fle7UsersroberUDocuments/Pirates/CodeypirateTactics_1120/enchantjs-buds-0.8.2-bygameypi. マ ? 琶 


船長 : か た いち ゃ ん _ 
攻撃 力 : 80 コ 
防御 力 : 60 
移動 力 : 3 
攻撃 の 距離 : 3 
HP : 2407240 


a フ 


var FunePopup = Class.create(Scene, { 
windowGroup.tl.scaleTo(l, 10, enchant .Easing. ELASTIC EASEOUT ) . 
then (function() { 
} ) 


ウィ ンド ウ の 「 戻 る ] ボタ ン に 触っ つた と き の 反 応 も 付け まし ょ う 。 


ec る 0 §. httpe: farm amaron.co jp 2 | index tm 3 2 し ( 


し 
を ご で 。」 fie:77UsersyroberYDocumentsyPiratesyCodepirateTactics_1120/enchartjs-builds-0.8.2-b/gamepi vy/ 二 


船長 : か た いち ゃ ん 
攻撃 力 : 80 
防御 力 : 60 
移動 力 : 3 
攻撃 の 距離 : 3 
HP : 2407240 


デレ っ 
マン 


ーー 瞬 ボ タン が 大 きく な っ て か ら 
ウィ ンド ウ が 消え る よう に する 


( スルメ スルメ メル ミ メル トミ スルメ メル メ ミコ ルミ スルメ メス 1 ルミ メル メル メル ミ メル トミ スルメ コト ルミ メ メル K メ メル ミ メメ スル ミ スル K メ メル ミ メル X 衣 は) 


爽快 感 ア ッ プ ! 


w1ndowGroup . モ 上 1 .soaleTo(1, 10, enchant.Easing.ELASTIC EASEOUT ) . 


then (Funo モ Eon() { 
Gu マウ スポ ボタ ン を 押し た と き に ボタ ン が すこ し 大 きく な る 


cancelBtnSprite.addEventListener (enchant .Event . TOUCH _START , 
function (params) { 

cancelBtnSprite.tl.scaleTo(l.l, 10, 

enchant .Easing.ELASTIC EASEOUT) 


「 EZPZZ7ZTEYLSJ 
cancelBtnSprite.addEventListener (enchant .Event. TOUCH END, 
function (params) { 

shieldSprite.tl.fadeTo(0, 5); 

cancelBtnSprite.tl.scaleTo(0.9, 3) .and() .fadeTo(0, 5); 

pirate. tl.fadeTo(0, 5); 

windowSprite.tl.fadeTo(0, 5) .then (function() { 


game . popScene() / 
if (self.onCancel) { 


self .onCancel ( ) 


2 3 
} ) 


| 船 の 移動 を 改善 


ドー トー ニキ ーー = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = 3 EE 


船 が 瞬間 移動 を し て いる と ころ を スイ スイ 移動 する アニ メー ショ ン に 変え る と 見 栄え が ぐっ と 良く な り 
ます (サン プル は chapter_13 一 22 に あり ます )。 


(メル メ メス ルミ メス ルミ メス ルミ メス ルミ メル トミ スルメ メル ミ メス ルミ メル ミ メル トミ メル メ メル メ メル ミ メ スル k ト メル k ミ メス ルミ メル K メル ミ ミル K メス ルミ ミユ) 153 


moveFune: function(fune, i, J, onEnd) { 


var postion = this.getMapPositionAtTile(i, ])/ 


var worldPosition = this.toWorldSpace (postion.localXx, postion.localY) ; 
worldPosition.x -= 16; 
worldPosition.y -= 32; 

距離 に よっ て 移動 時 間 が 変わ る よう に し ます 
var distance = utils.getEuclideanDistance (fune.1i, fune.], 1, ])/ 
Urne i= 5 
Fune.] = J; 


距離 に よっ て 移動 時 間 を 変え る こと で 大 体 同 じ ス ピー ド に な り ま す 


Fune . 七 ] .moVeTo (worldPosition.x, worldPosition.y, distance *10, 
enchant.Easing.QUAD EASEINOUT) . then (onEnd) ; 
} , 


た だ し 、 サ ンプ ル を 触っ て みる と 分 か る の で す が 、 船 が 移動 し て いる あい だ に 違う エリ ア を タッ チ す る 
と 不具 合 が 発生 し ます 。 これ を 防ぐ 方 法 は いろ いろ あり ます が 、 以 前 使っ た モー ダル シー ルド と 同じ 手法 
を 使い た いと 思い ます 。 


on モ Eouohend : function (params) { 
ュ (this.getManhattanDistance(this.activeFune.i, this.activeFune.]J, 
tile.i, tile.]J) <= this.activeFune.getMovement()) { 
variselfi 三 this 
utils.beginUIShield() ; 
self.moveFune (self.activeFune, tile.i, tile.J], function() { 
var specialTile = self.getSpecialTile(tile.i, tile.]); 
if (specialTile) { 


specialTile.use(self.activeFune, function(needsRemove) 


if (needsRemove) { 


self.removeSpecialTile(specialTile) ; 


154 (は MX スルメ スルメ メル ミ メル トメ スルメ メル ミ メ スルメ メル ミ メル トミ メメ ルミ メト ルミ メ メル ミ メル ミ メル ミ メル ミ メ メル トミ メル ミ メ スル メ メル K ヌメ ルミ 1) 


爽快 感 ア ッ プ ! 


ut]s . endUTShi e1d ( ) : 蘭 モー ダル シー ルド を oc 


self.controller.endTurn() ; 


19 7 
} else { 


utils.endUIShield() : 人 モー タル シー ルド を co 


self.controller.endTurn() ; 


シー ルド を 使っ て お く と 移動 中 に 画面 の ほか の と ころ に 触れ て も 不具 合 は 発生 し ませ ん 。 

また 、 サ ンプ ルコ ー ド で は then の 中 を 変更 し て いま す 。 ア ニメーション が 終っ て 初め て ター ン が 進む 
よう に する た め 、 タ ー ン を 進め る 処理 を then の 中 に 移動 し まし た 。 こ うす れ ば アニ メー ショ ン が 終る まで 、 
ター ン は 進ま な いこ と に な り ま す 。GameMap の moverune に タイ ムラ イン を 適用 し ます 。 


に 
] a 
( が 「 ユニ ッ ト の 重なり 方 を 改善 する 
= ram [a 時 本 UT Yi | {i FOE [EE EE MN [EE FS | (EE! EE [EE UE I TE [EE FE EE | FE CS FS FE [ll [FS EEE EI (EE Fa (EE Yi [i 
これ で 船 が 滑ら か に 動く よう に な り ま し た 。 し か し 、 サ ンプ ル で 気が付い た か も し れ ま せん が 、 と きど 
き 船 の 移動 中 に 変 な 重なり 方 に な る こと が あり ます 。 移動 中 の 船 が ほか の 船 の 上 に 重なる か 下 に 重なる か 
は 船 に に っ て まち まち で す 。 
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これ は 画面 の 奥行 き に 関す る 描画 順 の 問題 で す 。 こ の 問題 は 多く の 場合 、z-sort と いう 仕組 み を 作っ て 
解決 し ます 。 

今 ま で は X 軸 と Y 軸 で 船 を 操作 し て きま し た 。 奥行 き に つい て は 通常 Z 軸 で 取り 扱い ます 。Z 軸 の 位置 関 
係 を 見 て 描画 の 順番 を 決め る の が z-sort で す が 、enchant.js に は Z 軸 や z-sort の 概念 は あり ませ ん 。 

た だ し 、 幸 い に も 実装 は 簡単 に 直す こと が で きま す 。 今回 の ゲー ム の 画面 で は スプ ライ ト は 左 に ある も 
の か ら 順 に 奥 に 並ん を で いる と いう こと に な り ま す 。 つ まり 、Y 軸 の 並び 順 を 調べ れ ば Z 軸 の 順番 も 決め ら 
れる ご と に な り ま す 。z-sort は y-sort で 置き 換え られ る よう に な り ま す の で 、y-sort で 措 画 順 を 決め まし 
ょ う (サン プル は chapter_13 ー 23 に あり ます )。 


zsort: function() 1 
var zorder = []; 
for (var c=0; c < this.playLayer.childNodes.length; ++c) { 
zorder .push (this.playLayer .childNodes[c]) ; 
} 


zorder.sort (function(a, b) { JavaScript の 配列 の ソー ト 機 能 を 使い ます 


i ば (asy > Dey) 4 
return 1: 

} else if (a.y == b.y) { 
f(a x > 所 、 先 】 


return 1: 


Fielse ユエ ユ 下 (aa。 エ == bx 1 
ソー ト の 順 を 決め ます 
return 0: 


} else { 


return ーー] 


} 
} else { 


return -1l; 


}) ; 


Ffor (var 1=0; ュ 1 ぐ zorder. length; ++ ユ 1) { Os RE 


this.playLayer .addChild(zorder[i]) / 
} 


zorder.sort(function(a, b) {の 部 分 で 定義 され る 関数 で 比較 の ルー ル を 定義 し ます 。 コ ー ド で 
は a の Y 座 標 が b の Y 座 標 よ り も 大 きけ れ ば 1、 同 じ 場 合 は X 座 標 も 比較 し て 大 きけ れ ば 1、 一 致し て いれ ば 0、 


ススメ スル ミ メル K ム メル トミ メル トメ スル トミ メス ルミ メル ミ メメ メル トミ メル トミ メル トメ メル メ メル メ スルメ メル メ スルメ メル トミ メル K メル K スル ミ スト) 


爽快 感 ア ッ プ ! 


それ 以外 は -1 が 返る よう に な っ て いま す 。1 が 返っ た 要素 は 前 に 、0 の 場合 は その まま 、-1 の 場合 は 後ろ 
に し ます 。sort メ ソ ッ ド は この ルー ル に 従 つ て 配列 の 要素 を すべ て 並べ 替え て くれ ます 。 


そし て 、 フ レー ム ご と に GameMap の zsoct を 呼ぶ よう に し ます 。 
tiles.addEventListener (enchant.Event .ENTER FRAME / function (params) { 


self.zsort() 


} ) 


これ で ちゃ ん と 移動 中 の 描画 順 が 守ら れ て 不 上 自然 に 見 えま せん 。 


ほか に も 細か い ア ニメーション を 付け まし た が 、 た と えば HP ゲー ジ や 攻撃 の エフ ェクト な ども 紹介 し 
た 例 と 同じ よう に な り ま す の で 、 そ れ ぞ れ に つい て は サン プル コー ド で 確認 し て みて くだ さい 。 


ら の チキ プター で は ゲー な 
の 見 栄え だ け を 改善 し て ル 
ー ル の ほう は 一 切 変え て い 
ませ ん が 、 一 気 に ゲ ー ム ら 
し じ し ぐ な り ま し じ た ! 

それ は 爽快 感 の 効果 で す 。 
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再生 を ルー プ す る 仕 
組み は ブラ ウザ に よ 
っ て 違い ます 。 仕組 上 
み の 違 い を 判断 し 上 
て 、 ぞ それ ぞ れ 対応 を | 
取れ る よう よう に プ 
ログ ラミ ング し まし 


ボリ ュー ム を 調整 する 較 記 
仕組 み を 作り ます 回 還 


う ょ う 鍛 | 
enchant.js の 音声 再 人 / NN へ | 
生 機 能 を 使っ て 、 音 声 mi 
の 再生 を まとめ て 取り © TY) 
扱 つ SoundManager 剛 語 語 計 >v- < 


クラ ス を 作り ます 


本 章 で 勉強 する こと 


@ サ ウン ド を 加え る と ゲー ム の 爽快 感 が ぐっ @ 音声 の 再生 、 一 時 停止 、 同 時 再生 、 ボ リュ 
と アッ プ ー ム の 調整 方 法 を 覚え よう 

@ サウ ンド を 管理 する た め の ク ラス @ イ ンタ ーネット の フリ ー 素 材 な ど を 活用 し 
(sounqManager) を 作っ て 一 括 管理 し よう て 効果 を アッ プ し よう 


見 た 目 の 磨 き に 続い て サウ ンド が 加わ れ ば 、 ゲ ー ム の 仕組 み は そ の まま で も 爽快 感 が もっ と 上 が る は ず 
で す 。 ブ プラウザ 内 で 再生 する サウ ンド は 、 現 在 の と ころ グラ フィ ッ ク の 描画 ほど 高速 な 処理 が で きる わけ 
は あり ませ ん が 、 ゲ ー ム に 必要 な ちょ っ と し た 音声 の 再生 で あれ ば 十分 に 利用 可能 で す 。 


サウ ンド 


らい 
1I 
トマ ーー N 
( / ' | 音声 の 再生 の 万 法 
Ce i 5 = = = = = = EE = 時 = EE = = EE = EE = = Ed 時 雪上 時 時計 i = EE i = 計時 時 EE 
まず は 一 番 イ ン パ クト の ある 、BGM の 再生 か ら 始 め ま す 。 最 初 は 画像 と 同じ よう に 音 の デー タ を あら 
か じ め preload で 読み 込み ます 。 


game . preload(!'../../../resources/sound/highseas.mp3' ) ; 


こう し て お け ば グラ フィ ッ ク の と き と 同 じ よ うに game . on1oada が 呼ば れ た あと は 自由 に 再生 が で きま 
す 。 


game .assets['../../../resources/sound/highseas .mp3' ] .p1ay() / 


今回 の 音楽 は ちょ っ と 区 沢 に この ゲー ム の た め に 作ら れ ま し た 。 し か し 、 目 分 で 音楽 は 作れ な く て も 、 
ゲー ム の 音楽 を 作っ て みた いと いう 優秀 な イン ディ ー ズ の クリ エイ ター も いま す 。 ゲ ー ム の 企画 が 面白 け 
れ ば 協力 者 を 見 つけ られ る か も し れ ま せん (音楽 に 関し て は Twitter な どの SNS で 交流 する の も お 勧め で 
す )。 


(Z| SoundManager を 作る 


= ap le ay FE CE FE (FE TEE FE FEY (EE EE RE TE [| ME Pi FN] = I TE] = お EER [FY [ET 5 [PE FE [PE 550) = il IE EE [| Fe 5 FC Ia [EI 


ゲー ム に 音声 を 付け する と き の 管 理 、 と くに 音量 な ど は 複雑 に な り が ち で す の で 、SoundManager を 作 
っ て 管理 は そちら で 統一 する こと に し まし ょ う 。 最 初 は た ん に BGM を 流す メソ ッ ド を 用 意 し ます (サン 
プル は Chapter_14 ー 24 に あり ます )。 


ゞ ar SoundManager = Class.create({ 


initialize: function() { 


this.volume = 0.5; ボリ ュー ム の 値 の 設 


this.bgmPlaying = false; 
}, 


playBGM: function() { 


this.bgmPlaying = true / 
再生 開始 


ボリ ュー ム の 
game .assets [ sndBGM] .play () ; 


game . assets [ sndBGM] .volume = this.volume ; 


(スル K スルメ スルメ メル メ メル K ユメ ルミ メル K メ メル トミ メス ルミ メル ミ メル トミ コメ ルミ メ メル ミ ム スルメ メル K ム メル ミ メ メル ミ メス ルミ メ メル ミ メル ミ メル ミ 1) 
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} 


SoundManager の メソ ッ ド pl1ayBeM を 実行 すれ ば サウ ンド が 鳴り 出し ます 。 


し 

| we や 
(た | サウ ンド を 止め る 、 一 時 停止 させ る 

人 1 I PF = TE 呈す Es TE FE | [= =) | [Rd Em Ei PPP [i [FE IF デマ | 時 PP IS] [i I [EE [| ee Ii Rm Es まき [= Pear FPW 5 

短い 音 の 再生 で あれ ば 、 音 の 停止 を 気 に す る 必要 は ほとん ど な い か も し れ ま せん が 、BGM の よう に 場 

面 に 応じ て 音楽 を 切り 替え る も の は 、 明 確 に 音 を 停止 する こと が 望ま し いと きも ある で し ょ う 。 今回 の ゲ 
ー ム で は そこ まで 細か な 制御 が 必要 で は あり ませ ん が 、 念 の た め sounaManager に stop と pause を 実装 
し て お きま す 。 


var SoundManager = Class.create({ 


pauseBGM: function() ( (ポーズ ] 


this.bgmPlaying = false; 
game .assets [ sndBGM] .pause() ; 


} / 


stopBGM: function() { 


this.bgmPlaying = false; 
game .assets [ sndBGM] . stop () ; 
よ / 


名 前 の と お り stop は サウ ンド の 再生 を 停止 し ます 、 そ の 後 、s1ay を 実行 すれ ば また 最初 か ら 再 生 が 始 
まり ます 。 一 方 、sause は 音 を 中 断 し ます 。 pn1ay を 実行 すれ ば 中 断 し た 位置 か ら 再 生 を 再開 し ます 。 


(は MX スルメ スルメ メル メ メル メ スル メ メル ミ メ スルメ メス ルミ メル トミ メル トミ メト ルミ メ メル ミ メル ミ メル ミ メル ミ メ スルメ メス ルミ スル メ メル K メル ミ 1 は) 


し 
l 
Z ヾ や マテ し | 
(| 効果 音 を 実装 
= = = = = = = = = ここ = = = = = = = = = = = = = = = = = = = = = = = = 党 
同じ サウ ンド を 複数 回 、 同 時 に 再生 し た いと き 、 た と えば ゲー ム の 中 で 撃つ 弾 の 効果 音 な ど は サウ ンド 
を 複製 (clone () ) し て か ら play() を 実行 し ます 。 


var sound = game.assets['se6.mp3'] .clone() ; 


sound.play () ; 


この コー ド に お ける game.assets['xxx.mp3' ] に は sound オ ブ ジ ェクト が 格納 され て お り 、 
ec1one() は それ を 複製 する た め の メ ソ ッ ド で す 。souna オ ブ ジ ェクト を 複製 し な く て も 再生 は で きま す 
が 、 そ の 場合 は 同じ 音声 を 重ね て 鳴ら すこ と は で きま せん 。 サ ウン ド を 複製 し て 再生 する 機能 
soundManager に 追加 し まし よう 。 


var SoundManager = Class.create({ 
中 略 
playFX: function(name) { 


var fx = game.assets[name] .clone() ; サウ ンド を 複製 


fx.volume = this.volume ; 
fx. play (); 
ドッ 


これ で 爆発 、 水 没 、 ク リッ ク な どの さま ざま な 効果 音 を sounaManager の p1ayEX メ ゾ ソ ッ ド で 再生 で き 
る よう に な り ま す 。 


sndManager.playFX (sndExplosion) / 


ゲー ム に サウ ンド を 付け る だ け で 倍 ぐ らい 魅力 が アッ プ し ます か ら 、 ゲ ー ム を 作る と き は ぜひ サウ ンド 
を 付け る よう に し まし ょ よう 。 

と くに 効果 音 に つい て は 、 ネ ッ ト 上 を 探す こと で フリ ー 素 材 が いろ いろ 見 つか り ま す 。 も ちろ ん 良い 効 
果 音 を 選ぶ の は 簡単 で は あり ませ ん が 、 ち ょ っ と し た 手間 と 時 間 を か けれ ば 簡単 に サウ ンド を 追加 で き 、 
より いっ そう 胡 華 に な り ま す 。 


(メル K メ メス ルミ スル ミ メス ルミ メル メ メル ミ メス ルミ メ メル ミ メル トメ メル ミ メル トミ メル メ メル メ メル メ メス ルル k メ メル K メ メル ミ メル K メ メル ミ コス ルミ メル ミ え 【) 
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me 
| ー 
| 音量 調整 
= ti お 1 (= 8 = 9 FR EE = FB p= Np Ep = 3 Ep i 2 Ep p= [= 請う 計 還 き = 計 
音量 の 調整 は sound オ ブ ジ ェクト の volume プロ パテ ィ を 用 いま す 。 
volume の 値 は 0 (0%) か ら 1 (100%) の あい だ で 指定 し ます 。 初 期 値 は 1 と な っ て いる の で さき ぼ ほ 
ど は soungManager の 音量 を 0.5 に 変え まし た 。 こ うし て お け ば いき な り 大 音量 で 再生 され る こと は な い 
で し ょ う 。 
ここ で は 音量 の 調整 用 の メソ ッ ド を 用 意 し ます 。 ryo1umsup と vo1umeDown メ ソ ッ ド を 用 意 し 、 
vo1umes プ ロ パ ティ を 5% す つつ 変更 し ます 。 値 が 変わ っ た ら 確 認 用 に クリ ッ ク 音 を 再生 する よう に し ます 。 


var SoundManager = Class.create({ 

volumeUp: function() { 
this.volume += 0.05; {FU aA を 5%727) 
1f (his volume > 1) 1 

this.volume = 1l; 

} 
console.log("volume", this.volume) ; 
game .assets[ sndBGM] .volume = this.volume ; 
this.playFX (sndClick) ; 

1 


volumeDown: function() { 
this.volume -= 0.05; | ボリ ュー ム を 5% ダ ウン | 
if (this.volume < 0) 1{ 
this.volume = 0; 


1 


console.log("volune", this.volume) ; 
game .assets[ sndBGM] .volume = this.volume ; 
this.playFX (sndClick) ; 

hs 


getVvVolune: function() { 


return this.volume ; 


} , 


(は 人 X スルメ スルメ メル メ メル トメ スル メ メル ミ スルメ メス ルミ メル トミ メル トミ メト ルミ メ メル ミ メル ミ メル ミ メス ルミ メ スルメ メル ミ スル メ メル K メル ミ 1) 


サウ ンド 


、 
N a 
| サウ ンド の 設定 画面 
= = = = = = = = = = = = FE = = = = = = = = 0 = = = = = [i= = = = = EE i EF EE EE 
これ で プロ グラ ム か ら ボ リュ ー ム を 調整 する 仕組 み が で きま し た 。 次 に 音量 は プレ イヤ ー 自 身 が 調整 で 
きる よう に 設定 画面 を 作る こと に し まし ょ う 。 


5 “x \ _ ーー し し 
"* 角 e:///Users/robert/Desktop/pirateTactics/enchant.js -builds-0.8.1/game/pirates/head/in.… yl ミ 


var SettingsWindow = Class.create(Scene, { 
initialize: function(gameManager) { 
soundLabel = new Labe1 ("音量 ") ; 
settingsGroup.addChild (soundLabel) ; 
var sndUpButton = new Sprite(64, 64); 
settingsGroup.addChild (sndUpButton) ; 


音量 アッ プ ボ タン 


sndUpButton. addEventListener (enchant .Event. TOUCH END, 
function (params) { 
if (gameManager.sndManager. getVolume() < 1) { 
if (isKeyPressed == true) { 
qameManaqer . sndManager. volumeUp () ; 
sndUpButton.tl. scaleTo(l1.0, 3) . ブ then (function() { 
isKeyPressed = false; 


2 


}) 7 


スルメ メス ルミ スルメ メル ミ メル K ミル トミ メス ルミ スルメ メル ルム メ メル ミ メス ルミ メル ミ メ コル トメ メス ルミ メス トミ メル トミ メル ミ メル K ム ミル メ メル K メル トミ メ 【) 
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var sndDownButton = new Sprite(64, 64): 音量 ダウ ン ボ タン 
settingsGroup.addChild (sndDownButton) ; 
sndDownButton. addEventListener (enchant .Event. TOUCH END, 
function (params) { 
if (gameManager.sndManager.getVolume() > 0) { 
if (isKeyPressed == true) { 
gameManager. sndManager.volumeDown() ; 
sndDownButton. tl.scaleTo(l.0, 3) .then(function() { 


isKeyPressed = false; 


| ループ 再生 


= = = 時 I= [== = [= [= = EE = = = = = = = = = 5 雪上 細雪 = = = = = = = = = = 計上 


これ で いっ た ん サウ ンド 再生 機能 の 実装 は 完了 し た よう に 見 える か も し れ ま せん が 、 数 分 する と BGM 
は 終っ て し まい ます 。 そ れ を 防ぐ た め に サウ ンド の ルー プ を 考え まし ょ う 。 

パー ト 1 で も 述べ た よう に 、 ブ ラウ ザ の 仕様 は 種類 に よっ て いろ いろ と 異な り ま す 。 こ れ は 音 に 関し て 
も 同じ で 、 仕 組み が 大 きく 異な る こと が あり ます 。 基 本 的 に ブラ ウザ は WebAudioSound ま た は 
DOMSound と いう 仕様 の どちら か に 従っ て 実装 され て いる こと が 多い の で す が 、 基 本 の と ころ は 
enchant.js が 吸収 し て くれ ます 。 


た だ し 、enchant.js は 音楽 の ルー プ 再 生 に は 対応 
し て いま せん 。 そ の た め 、 音 声 再 生 の 仕組 み に よ っ て | 
それ ぞ れ 必要 な 対応 が 異な つて きま す 。 ss 加 

DOMSound 使 用 時 は snterEramse イ ベン ト が 発生 へ 、 5 
する た びに 毎回 lay を 呼び 出す こと で ルー プ を 実現 
で きま す 。 し か し 、WebAudioSound で は play を 呼 。 図 14-1 サウ ンド 再生 機能 と enchant.js 
ぶ と 先頭 か ら 再 生 さ れる た め 、 こ の コー ド で は ルー プ 
再生 に な り ま せん 。WebAudioSound の 環境 で 前 述 
の 方 法 を 実行 する と ノイ ズ の よう な 音 に な っ て し まい 


(は MX スルメ スルメ メル メ ミ メル トメ スルメ メル ミ メル メ メル ミ メル トミ メス ルミ メト ルミ メ メル ミ メル KK ミ メル K ミ メル ミ メ メル トミ メス ルミ スル メ メル K メル ミ 1) 


サウ ンド 


ます 。WebAudioSound 使 用 時 は se . 1oop プ ロ パ ティ に true を 設定 し ます 。 こ うし て お く と sray を 繰 
り 返 し 呼び 出す 必要 は あり ませ ん 。 

両方 の 仕様 に 対応 する に は どう すれ ば よい で し ょ うか ? 今回 の 場合 は 、src プ ロ パ ティ が ある か な い 
か を 見 て 判別 すれ ば よい で し ょ う 。 次 の コー ド で は 、if (game . assets [sndBGM] . src) と いう 部 分 で 、 
判断 し て いま す 。sre が な い 場 合 は game . assets [sndBeM] . scc の と ころ が fa1lse に な り ま す の で 、 こ ご 
れ で 判断 が で きる と いう わけ で す (サン ブル は chapter_14 っ 25 に あり ます )。 


var SoundManader = Class.create(Sprite, { 
playBGM: function() { 
this.bgmPlaying = true; 


game . assets [ sndBGM] .play () ; 


if (game.assets [sndBGM] . Sro) { src プ ロ パ ティ の 有無 を 調べ る 


game . assets [ sndBGM] . sro.1oop = true; 
} else { 


game . currentScene.addChild (this) ; 
} 
game . assets [ sndBGM] .volume = this.volume ; 
}, 
onenterframe: function()({ 
if (this.bgmPlaying) { 
game . assets [ sndBGM] .play () ; 


スマ ー ト フォ ン で サウ ンド を 使う 
最後 に スマ ー ト フォ ン で の サウ ンド 再生 に 関し て すこ し 補足 し て お きま す 。 Android や 
iOS は まだ HTML5 の <auaio> タ グ の 実装 が 追い つい て いな か っ た り 、 特 殊 な 仕様 
を 採用 し て いた りす る と いう 事情 が あり ます 。 その た め 、enchant.js の 音声 の 再生 は 
すべ て の プラ ッ ト フ ォ ー ム バー ジョ ン を サポ ー ト で き て いる わけ で は あり ませ ん 。 最 
新 の モエ デル で な けれ ば | 動け ば ラッ キー| くら い に 思 っ て お いた ほう が よい で し ょ う 。 

と くに 、iOS 上 の ブラ ウザ (Mobile Safari) に つい て は 「 プ レイ ヤー が 画面 に タッ プ 
し た と き 以 外 、 音 声 が 再生 で き な い | と いう 大 き な 制 限 が あり ます 。 


スルメ スル ミ メル トミ メス ルミ メス ルミ メ ム メス ルミ スル ミ メ メル ミ メス ルミ メル ミ メル トミ メル メ メル メ メル メ スル K メル トミ メル ミ メル K メル ミ ミル K メル ミ ミ 1) 165 
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荒れ た 海 、 浅 い 海 で も 移 
動 コ スト を 変化 させ 、 さ ざさ 
ら に ユニ ッ ト の 性 質 に よ 
っ て も 移動 コス ト が 変化 
する よう に し ます 


移動 は 最短 経路 を 計算 
し 、 そ の 経路 に 沿っ て 動 
く よ う に 作り 込み ます 


みえ ユル ーション ゲー 
ム ら し く 、 地形 の 影響 
を ゲー ム に 反映 させ 
まし ょ う = 


A ス ター サー チ が 使え る よう に 、 地 形 
の 情報 を 反映 し た 3 種類 の マッ プ デ ー 
タ を 上 自動 で 作る 方 法 を 紹介 し ます 


"em ーー デーーーーーーーーーーーーーーー 


/ 本 章 で 勉強 する こと 


e 移動 力 と 経路 を 計算 し て 正しく 移動 が で き @ で も 、 目 分 で 実装 する 必要 は な く フ リー の 
る よう に し よう ライ ブラ リ を 活用 する こと に し ます 


@ 経路 の 計算 に は 定番 の A ス ター サー チア ル @ 移動 力 に 応じ て ユニ ッ ト も 動く よう に し 、 
ゴリ ズム を 採用 し ます 動き に も 変化 を 付け て み ま す 


この ゲー ム を 作り 始め て 間 も な い ころ か ら フ ィ ー ル ド 上 の 陸 と 岩 に ユニ ッ ト を 置く こと は で き な い 仕様 
に し て いま し た 。 し か し 、 気 が 付い た 方 も いる と 思い ます が 、 移 動 の 途中 で 岩 や 島 を 通過 する こと は 可能 


で 7 だ 。 


マッ プ の 影響 を 受け る 


も ちろ ん 、 こ れ が 飛行 機 な ら 問 題 あ り ま せん が 、 や は り 船 は 岩 の 周 り を 次 の よう に 回 っ て ほし いも の で 
す 。 


そし て も ちろ ん 実際 に 移動 で きる 距離 も 障害 物 に 合わ せ て 正しく 計算 する 必要 が あり ます 。 今度 は その 
部 分 の 作り 込み に 取り 掛か り ま し ょ う 。 


地形 の 原点 か ら 目 的 地 ま で の 道 を 探す の は 探索 と いう 操作 に な り ま す 。 こ の よう な 道 を 探索 する アル ゴ コ 
リス ム (計算 式 ) は た くさ ん あり ます が 、 ゲ ー ム 業界 で 使わ れ て いる アル ゴリ ズム は 基本 的 に ひと つ に 絞 
られ る よう で す 。 そ の アル ゴリ ズム は A ス ター サー チ (A-star search) と 呼ば れ て いま す 。 

A ス ター が ゲー ム で 採用 され る 理由 は ほか の アル ゴリ ズム より は 早く 計算 が で きる こと 、 処 理 能力 や メ 
モリ な どの リソー ス を そこ まで 使わ な く て も 、 か な り 正 確 な 結果 を 出せ る こと で す 。 

A ス ター は 次 の 図 の よう に 原点 か ら 目 的 地 の ル ー ト を いろ いろ と 試し な が ら 最 短 の ルー ト を 計算 し ます 。 


(スルメ スル ミ メス ルミ メル トミ メス ルミ ユメ ルミ スル ミ メ メル トミ メル K メ メル トミ メル トミ メル メ メル トメ メル ミ メ スル K メル トミ メス ルミ スル K メル ミ コミ ルミ メル ミ ミ 1) 167 
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図 15-1 A スタ ー サ ー チ の イメ ー ジ 


この A スタ ー の アル ゴリ ズム を 数 学 的 に 説明 する の は と て も 難し く 、 プ ログ ラム と し て 理解 する の に も 
それ な り に 経験 と 知識 が 必要 な の で す が 、 幸 い に ほ と ん どの 言語 や フレ ー ム ワー ク で は 、 誰 か が A ス ター 
アル ゴリ ズム の ライ ブラ リ を 提供 し て くれ て いま す 。 私 た ち が 使 っ て いる enchant.js の 言語 davaScript 
で も A ス ター の 実装 (ライ ブラ リ ) を 探す こと が で きま す 。 

いろ いろ な 実装 の 中 か ら 今 回 は 次 の サイ ト に ある ライ ブラ リ を 選択 する こと に し まし た 。 


https://github.com/bgrins/javascript-astar 


こと ちら は 長く 使わ れ て いて 実績 が あり 、 安 定 し た 動作 が 期待 で きま す 。 今 回 は 事前 に こち ら を 開発 環境 
に も 含め まし た の で 、 直 接 ダ ウン ロー ド す る 必要 は あり ませ ん が 、 時 間 と と も に ライ ブラ リ は 進化 を し て 
いま す の で 、 別 の プロ ジェ クト を 作る な ら 新 た に ライ ブラ リ の 最新 版 を ダウ ン ロ ー ド する 必要 が ある か も 
し れ ま せん 。 

開発 環境 に ある A ス ター の デモ (. ./game/shared/javasorip も -as も ar/demo/index.htm1) を ち 
よっ と 触っ つて みる と その 動き が 分 か る と 思い ます 。 


@OO 「 Demo - JavaScript A * Sear xX a a 
を => G 1 file:///Users/robe Desh ktol a ateTactics/en 本 -builds-0.8.1/game/shared/javascri 


メメ スル メ メル K ム メル ミ メル トメ スル トミ メス ルミ メ メル ミ メ メメ メル トミ メル トミ メル トメ メル メ メル メ スルメ メル メ メル トミ メル トミ メル K メル K ミス ルミ 1) 


マッ プ の 影響 を 受け る 


| A ス ター を 組み 込む 


ド に トー トー に ーー トー トー | トート に トー トニ トー トニ | ニー に ーー 
ライ ブラ リ の 使い 方 は か な り シ ンプ ブル で す 。0 と 1 の 記号 で デー タ 化 し た 地図 を ライ ブラ リ に 渡し て 、 
出発 地 と 目的 地 を 設定 すれ ば 最短 ルー ト を 返し て くれ ます 。 簡単 な 使用 例 を 見 て み ま し ょ う 。 


var graph = new Graph([ 


[1,1,1,1], 
[0,1,1,0], 通れ な いと ころ を 0、 通 れる と ころ を 1 と する 
OO LE 


]); 
古 
var start = graph.grid[0][0]; 


var end = graph.grid[1l][21]; 


var result = astar.search(graph, start, end); 最短 ルー ト の 配列 が 返り ます 


この 機能 は 今 ま で 作っ て きた 各種 の 機能 と は 違い 、enchant.js に は 含ま れ て いま せん 。 そこ で 
enchant.js と は 別に この ライ ブラ リ を 読み 込み まし ょ う 。 久 し ぶり に main.js で は な く 、index.html を 編 
集 す る こと に し ます (サン プル は ohapter_15 27 に あり ます ) 。 


< く !DOCTYPBE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="x-ua-compatible" content="IE=Edge"> 
<meta name="viewport" content="width=device-width, 
user-scalable=no"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<script type='text/javascript' ge 
src='../../../shared/javascript-astar/astar.js'></script> この 行 を 追加 
<script type='"text/javascript" 
sroc=" ../../../,./build/enchant.js"></script> 
<script type='"text/javascript" src="main.]s"></script> 
<style type='"text/css"> 
body { 
margin: 0: 


padding: 0: 


(スル XK スルメ スルメ メル メ メル K メル メ メル K メル トミ メメ ルミ メル ミ メル K ミ メルト メ メル ミ ム メル メ メル K ム メル ミ メ メル メメ メス ルミ メ メル ミ メル ミ メル ミ 1) 
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} 
</style> 


</head> 
<body bgcolor='"grey"> 
</body> 
</html> 
<script type=' text/javascript' src='../../../shared/javascript-astar/astar. 


js'></script> の 記述 に より ライ ブラ リ が 使え る よう に な っ た は ず で す 。 早速 使っ て み ま し よう 。 

まず マッ プ デ ー タ が 必要 で す が 、 残 念 な が ら A ス ター の ライ ブラ リ が 使っ て いる マッ プ デ ー タ と 
enchant.js が 使っ て いる マッ プ デ ー タ は 異な り ま す 。 そ こ で いっ た ん GameMap の 中 で A ス ター ライ ブ 
ラリ 用 の マッ プ を 生成 し ます 。 こ れ は 以前 の 当たり 判定 の マッ プ の 作り 方 と 同じ で す 。 


var mapSearohData = []: 


for(var ]=0: J < this.mapHeight; ココ ++) { 


mapSearohData[]] = []; すべ て の マス を 順に 調べ る 


for(var i1=0; 1 < this.mapWidth; ュ 1++) { 
if (mapData[]] [1] = ニニ tileTypes.riku.id | 
ON 岩 か が 陸 で あれ ば 
mapData[]] [1] ニニ tileTypes.iwa.id) { 
mapSearohDa モ a[]] .push(0)/ 
} else { 


mapSearohDa セ モ a[]] .push(1) / 


} 


this.tiles.searchData = mapSearchData 


そし て 、 こ の デー タ を 使っ て 最短 経路 を 返す メソ ッ ド を GameMap に 追加 し ます (サン プル は 
chapter 15 28 に あり ます ) 。 


getPath: function(i,], targetI, targetJ) { 
var start = this.searchGraph.grid[]][il; 
var end = this.searchGraph.grid[targetJ][targetI]; 
var path = astar.search(this.searchGraph, start, end); 


return path; 


} ここ で A スタ ー ラ イブ ラリ を 使用 


(スルメ スル メ スル ミ メル メ スル トミ スル トム メス ルミ メル トミ スルメ スル トミ スル ミト メル ミ スル ミ メル トミ スルメ スルメ スルメ メス ルミ スル メ ム メメ ルミ ネル ミ スル ) 


マッ プ の 影響 を 受け る 


drawMoyvementRange の 中 で A ス ター を 呼び 出す だ け で 、 そ れ 以 外 の 部 分 は 今 ま で の 実装 を 変え る 必要 
は あり ませ ん 。 と は いえ A ス ター の 計算 は 多少 重い の で 、 一 部 は 今 ま で の 距離 の チェ ッ ク を 残し 、 無 駄 な 
処理 は 最小 限 に 抑え ます 。 


し 
| Pe 
| 移動 範囲 を 正確 に する 
= = = = = = = = = = = = = = = = 
今 ま で の 移動 可能 範囲 は 距離 だ け を 見 て いま し た 。 今後 は 距離 の 範囲 内 に ある マス の 最短 経路 を 計算 し 
て 、 経 路 が 移動 力 以内 で あれ ば 移動 可能 に し ます 。 


drawMovementRange: function() { 
if (this.outOfBorders(targetI, targetJ)) { 

if (this.getManhattanDistance(this.activeFune.i, 

this.activeFune.], targetI, targetJ) <= this.activeFune. 

getMovement()) { 
var path = this.getPath(this.activeFune.i, this.activeFune.], 
targetI, targetJ); 
if (path.length <= this.activeFune.getMovement()) { 


移動 可能 な 場合 の 処理 


} 


移動 先 の X の マー カー も これ に 従っ て 色 を 変え ます 


ontouchupdate: function(params) { 
if (this.getManhattanDistance(this.activeFune.1, this.activeFune.], 
tile.i, tile.j) <= this.activeFune.getMovement()) { 
var path = this.getPath(this.activeFune.1i, this.activeFune.], 
tile. 1 tilej)y 
if (path.length <= this.activeFune.getMovement()) { 


移動 可能 な 場合 の 処理 


スルメ スル K メ スルメ メル メ メル K メル メ メス ルミ メル トミ メス ルミ メル ミ メル トミ メル トメ メル ミ ム スルメ メル K ム メル ミ メ メル メメ ミ メス ルミ メ メル トミ ルミ メル ミ 1) 
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上 の コー ド は 表示 だ け で す の で 、GameMap の 実際 に 移動 する 処理 の 部 分 に つい て も 対応 させ る 必要 
が あり ます 。 


ontouchend:function(params) { 
中 賠 
if (this.getManhattanDistance(this.activeFune.1i, this.activeFune.], 
tile.i, tile.j) <= this.activeFune.getMovement()) { 
var path = this.getPath(this.activeFune.1i, this.activeFune.], 
if (path.length <= this.activeFune.getMovement()) { 
ざ a エ Se」f = this: 
utils.beginUIShield(); 


self.moveFune(self.activeFune, tile.i, tile.j, function() { 


self.controller.endTurn(); 


9 2 


中 略 


こと この辺 まで で きる と 、 ル ー ル 上 は 正確 な 動作 に な り ま す が 、 見 た 目 の う え で は まだ ユニ ッ ト が 岩 を 突き 
抜け て 動き ます 。 ユ ニッ ト の 移動 は 実際 の 経路 に 治っ て 動か す よ うに し まし ょ う 。 


| 正しい 経路 で 動く よう に する 


ドー トー ニー トーー ト ニニ リ リー ニ トー モー キー ニー【ー ニ りーー=| ニ ーー トー ニート ーーー コ | ーー ドーー トニ ーー ーーー リーー ト ーー リーー ト ーー| ーー ニー ニー トーーー:| ーー ニオ ーー リーー リ ロー ニー ニーー「 ーー ト ーー ニーー EH 


前 に 使っ た Timeline (tl) の 機能 を moverune に 組み 込み 、 正 確 な ルー ト に 沿っ て 動く よう に し まし ょ よう 。 
以前 は 原点 か ら 目 的 地 に 一 気 に 動 く よ う に な っ て いま し た が 、 こ ご これから は 正確 な 経路 に 沿っ て 、 目 的 地 ま 
で ひと マス ひと マス 移動 を 繰り 返し て 進み ます 。 
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マッ プ の 影響 を 受け る 


moveFune: function(fune, path, onEnd) { 新しい moverunc で は 船 、 経 路 を 引数 に する 


if (path.1ength > 0) { 


var nextMasu = path.shift(); 次 の マス の 座標 を 取り 出す 


var 1 = nextMasu.y; 
var J] = nextMasu.x; 
fune.i = i; 
fune.] = J; 


var position this.getMapPositionAtTile(i, ])/ 
var worldPosition = this.toWorldSpace(position.local※x, 


position.localY); 


worldPosition.x -= 16: 
worldPosition.y -= 32; 
var selt = this; 


fune.tl.moveTo(worldPosition.x, worldPosition.y, 10, 


enchant.Easing.QUAD __EASEINOUT) .then(function(){ 


self.moveFune(fune, path, onEnd); も う 一 度 moverunc を 呼び 出し て 
1) : 処理 を 繰り 返す 


} else { 
onEnd() 


}, 


これ で ちゃ ん と し た ルー ト に 沿っ て 移動 する よう に な り ま し た 。 
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し 
I 、 a 
| 海 の 種類 に よる 変化 
トコ ーー に ーー トー トー トー | に ーー トビ ーー トー トーーー キ ーー トーーー ト ーーー ト ニー に ーー ニーー ト ーー ーー キーーー キ ーー ニー ニーー ト ーー ピート ーー ニー: ーー トニー トニ ーーー ゴート ーー ーー ニー トー ニー サニー ドー 
海 の マ ス に は 最初 か ら 3 種類 あり まし た 、| 荒い | | 普通] | 浅い ] の 3 つ で す 。 い まま で は この 海 の 種類 
は 移動 に 影響 し ませ ん で し た 。 幸 い に も 採用 し た A ス ター の ライ ブラ リ に は 地形 の 移動 コス ト を 計算 する 
機能 が あり ます 。 ご ここ で は 、 そ れ を 活か し て それ ぞ れ の 地形 に 異な る コス ト を 付け まし ょ う 。 
ルー ル は シン ブル に 浅い 海 と 荒い 海 の 移動 コ スト を 2 に し ます 、 普 通 の 海 は 今 ま で どおり コス ト 1 に し 
ます 。A ス ター の マッ プ を 生成 し て いる 部 分 の コー ド を すこ し 変更 し まし ょ う 。 


探索 用 の デー タ 


var mapSearohData = []: 


for(var J=0; J < this.mapHeight; ]++) { 
mapSearchData[]] = []; 陸 と 岩 の 場合 
for(var i=0; 1 < this.mapWidth; ュ 1++) { 
if (mapDatal[]]l[i] == tileTypes.riku.id | 
mapData[]]l[i] = ニニ tileTypes.iwa.id) { 


mapSearohDa セ ta[]] .push(0)/ 通れ な い 


} else { 


if (mapDa セ ta[]] [1] == tileTypes.arai.id) { 荒い 海 の 場合 コス ト 2 


ma や SearohDa セ モ a[]] .push(2) / 


} else if (mapDatal[]j]l[i] == tileTypes.asai.id) { 


mapSearchData[]].push(2); 
* ト = 
} else { 浅い 海 の 場 合 コ ス ト 2 


mapSearchData[]].push(l); 


this.searchGraph = new Graph(mapSearchData); 


上 の デー タ で 移動 コス ト を 考慮 し た 最短 経路 が 取得 で きる は ず で す 。 現 状 で は 単純 に 経路 を 長 さ で 計算 
し て いま し た が 、 今 後 は 移動 に 必要 な コス ト 数 で 計算 する よう に gstpath を 変更 し まし ょ う (サン プル 
は chapter_15 ~ 28b に あり ます )。 


getPath: function(i,], targetI, targetJ) { 
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マッ プ の 影響 を 受け る 


var start = this.searchGraph.grid[]][il; 

var end = this.searchGraph.grid[targetJ] [target エ I]; 
var path = astar.search(this.searchGraph, start, end); 
path.cost = 0; 

for(var ユニ 0: i1<path.length;i++){ 


path.cost += path[i].getCost(); 志 経路 に 従っ て 移動 コス ト を 足し て いく 
} 


return path; 


}, 


この よう に 変更 し た ら 、 今 度 は path を 利用 し て いる すべ て の 箇所 を 次 の よう に 変更 し まし ょ う 。 
if (path.cost <= this.activeFune. getMovement () ) 


これ で 移動 距離 で は な く 、 移 動 コ スト に よる 最短 距離 が 計算 で きる よう に な り ま し た 。 


し 
! am と a a 
| 移動 コス ト に 応じ た スピ ー ド の 変化 
eee ltg 
移動 コス ト が 計算 で きる よう に な っ た の で 、 マ ス 上 の 移動 スピ ビー ド が コス ト に 応じ て 変わ る よう に し て 、 
ちょ っ と 爽快 感 を アッ プ し まし ょ う 。 コ スト が 高い ほど 、 移 動 が 遅く な り ま す (サン プル は chapter_15 
ー 29 に あり ます )。 


moVeFune: function(fune, path, onEnd) { 
ュ (path.1ength > 0) { 
var nexEMasu = path.shift(); 


var 1 = nextMasu.y; 
var ] = nextMasu.x; 
var cost = nextMasu.getCost() 


移動 速度 に コス ト を 反映 させ る 
var self = this; 


fune.tl.moveTo(worldPosition.x, worldPosition.y, 10 *cost, 

enchant.Easing.QUAD EASEINOUT).then(function(){ 
self.moveFune(fune, path, onEnd); 

}); 


(スル X スルメ スルメ メル メ メル K メル メ メル K メル トミ メス ルミ メル ミ メル K メル トメ メス ルミ メ スルメ メル K ム メル ミ メ メル メメ メ ルミ メ メル ミ メル K ミ メル ミ 1) 175 


(| 船 の 種類 に よっ て 変化 を 付け よう 


に トー トー に = に に ーー トニ トニ に に 


いち お うこ れ で ユニ ッ ト の 動き も 正確 に な り ま し た が 、 さ ら に 船 の 種類 に よる 移動 コス ト の 変化 を 作り 
込ん を で み ま し ょ う 。 

ゲー ム の 船 の 種類 は 4 種類 で す 。 速 い 船 は 軽い の で 浅い 海 で も 速く 移動 で きる よう に し ます 、 し か し 、 
同じ 理由 で 荒い 海 に は 適さ な い の で 移動 コス ト を 2 か ら 3 に 上 げ ま し ょ う 。 

防御 系 の 船 は 頑丈 な の で 荒い 海 で も 問題 な く 通行 で きる よう に し まし ょ う (コス ト 1)。 で も その 代わ 
り に 浅い 海 は 通行 し に くく な り ま す (コス ト 3)。 ほ か の 船 は 通常 どおり の 1 と 2 の コス ト を 採用 し ます 。 
それ ぞ れ の 移動 タイ プ と 地形 の 関係 を 表 に まとめ まし た 。 


マ 表 15.1 船 の 種類 と 地形 に よる 移動 コス ト 


通常 スピ ー ド 系 (Light) 防御 系 (Heavy) 
海 1 1 1 
荒 2 3 1 
浅 2 1 3 


この よう に 移動 パイ ターン は 3 つ あ る の で 、 そ れ ぞ れ の 移動 コス ト の マッ プ デ ー タ を 生成 し ます 。 


探索 用 の デー タ 


ゞ ar mapSearohData = []: 
var mapSearochDataLigh も = []; 3 種類 の マッ プ デ ー タ を 作る 
var mapSearchDataHeavy Ls 


for(var J=0; ] < this.mapHeight; ++) { 


mapSearohDa セ ta[]] = []; 
mapSearchDataLight[]] = []: 
mapSearchDataHeavy[]] = []: 
for(var i=0; ユエ < this.mapWidth; ュ 1++) { 
if (mapData[]] [1] == tileTypes.riku.id || 
mapDatal[]l[i] = ニニ tileTypes.iwa.id) { 
mapSearohDa セ ta[ ]] .push(0): 
mapSearchDataLight[]].push(0); 
mapSearchDataHeavy[]].push(0); 
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マッ プ の 影響 を 受け る 


} else { 
if (mapDa セ ta[]] [1] ニニ tileTypes.arai.id) { 
mapSearohDa モ a[]] .push(2)/ 
mapSearchDataLight[]].push(3); 
mapSearchDataHeavy[]].push(l); 


} else if (mapDatal[]]l[i] == tileTypes.asai.id) { 3 種 の マッ プ 
mapSearchData[]].push(2) ; 4 
mapSearchDataLight[]].push(1l); を 割当 て ます 


mapSearohDat 上 aHeaVy[]] .push (3) 
} else { 

mapSearohDa セ キ a[ ]] .push(1)/ 

mapSearchDataLight[]].push(l); 

mapSearchDataHeavy[]].push(l); 


this.searchGraph = new Graph(mapSearchData); 
this.searchGraphLight = new Graph(mapSearchDataLight) ; 
this.searchGraphHeavy = new Graph(mapSearchDataHeavy); 


getPath で は 船 ど ご と に 異な る マッ プ デ ー タ を 利用 し て 経路 を 計算 する よう に し ます 。 


getPath: function(fune, i,]J, targetI, targetJ) { 


var path; 

if (fune.moveType == "normal") { 通常 
var start = this.searchGraph.grid[]][il; 
var end = this.searchGraph.grid[targetJ] [targetI] ; 
path = astar.search(this.searchGraph, start, end); 


} 

if (fune.moveType == "light") { 
var start = this.searchGraphLight.grid[]][il; 
var end = this.searchGraphLight.grid[targetJ][targetI]; 
path = astar.search(this.searchGraphLight, start, end); 

} 


if (fune.moveType == "heavy") { 
var start = this.searchGraphHeavy.grid[]][il; 
var end = this.searchGraphHeavy.grid[targetJ][targetI]; 
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path = astar.search(this.searchGraphHeavy, start, end); 


path.cost = 0; 
for(var i1=0; 1<path.length;i++){ 


path.cost += path[i].getCost(); < 計 コス ト を 合計 する 
} 


return path; 


あと は それ ぞ れ の 船 が 採用 し て いる 移動 パタ ー ン を 定義 し ます 。 


キャ プ テ ン 一 normal 
攻撃 系 ー normal 
スピ ー ド 系 一 light 

防御 系 ー heavy 


normal | normal 


図 15-2 ユニ ッ ト と 移動 パタ ー ン の 対応 


BaseFune は moveType を norma1 に 設定 し ます 。 
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マッ プ の 影響 を 受け る 


var BaseFune = Class.create(Group, { 


initialize: function(id, stats) { 
this.moveType = "normal"; 
}, 


スピ ー ド 系 の 船 の 定義 は 1ight に し て 、 


var Haya1Fune = Class.create(BaseFune, { 


initialize: function(id) { 
this.moveType = "light"; 

}, 

中 略 


防御 系 の 船 の 定義 を heavy に し ます 。 


var KataiFune = Class.create(BaseFune, { 


initialize: function(id) { 
this.moveType — 


"heavy"; 


}, 


これ で シミ ュ レ ーション ゲー ム ら し く 地 形 が 影響 する よう に な り 、 ゲ ー ム の 戦略 性 と 奥深 さ が 一 段 と ア 
ッ プ を し まし た ! 
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必殺 技 を 作る 


オブ ジェ クト 指向 の 仕組 み を うま く 使 
っ て 、 共 通 の 部 分 は プロ グラ ミン グ し 
な いで すむ お よう に し よう 。 派 生 さ せ た 
キャ ラク ター に 特徴 を 実装 する 方 法 を 
紹介 し ます 


ゲー ム に 登場 する キャ ラク ター ご と に 、 
能力 の 違い を プロ グラ ム で 表現 し よう 


単純 な ステ ー タ ス の 

時 ルー ル を 無視 する も 
の まで 。 さ ま ざ ま タ 
イプ の 必殺 技 を 紹介 


語 較 必殺 技 は ステ ー タ スウ ィ ン ド ウ 尻 
か ら 発動 させ ます 


/ 本章 で 勉強 する こと 


@ キャ ラク ター の 個性 を 光ら せる 必殺 技 を 作 @ 継続 の 機能 を 利用 し た いと き は プロ ト タ イ 
り 込 も う プ が 便利 で す 


e ます 基本 的 な 機能 を 作り 込ん を で それ を 拡張 
させ て いき ます 


各 ユ ニッ ト の パラ メー タ に は 違い が あり 、 ユ ニッ ト に よる 地形 の 特性 も ゲー ム の 中 に 再現 され て いる の 
で 今 の まま で も いち お う の 個 性 は 出 て いま す 。 で も それ に プラ ス o で 各 船 に 独自 の 必殺 技 を 実装 し まし ょ 
う 。 こ と これ で ユニ ッ ト ご と の 個性 が 一 層 際 立ち ます ! 

必殺 技 は ゲー ム の 面白 さと 奥深 さ に 直接 繋が り ま す 。 し か し 、 必 殺 技 の よう な 機能 は 基本 の ゲー ムル ー 
ル の 例外 に な り ま す の で 、 実 装 は パー ト 3 の 最後 に 持っ て きま し た 。 


必殺 技 を 作る 


考え られ る 必殺 技 は いく ら で も あり ます が 、 こ れ か ら 4 つ の 必殺 技 を 作り 込み ます 。 そ れ ぞ れ が 異な る 
特徴 を も つ 必 殺 技 で す の で 、 今 後 は に これら を 元 に オリ ジ ナ ル な 技 も 作れ る と 思い ます 。 


| 

| 必殺 技 の 使い 方 
me 
この ゲー ム で 必殺 技 を 実行 する の は ステ ー タ スウ ィ ン ド ウ か ら に し ます の で 、 ま ず ス キル 発動 用 の ボタ 

ン を 新規 に 追加 し まし ょ う (サン プル は chapter_16 30 に あり ます ) 。 


initialize: function(fune) { 


ボタ > ラ 追 
サオ ー my skillBtnSprite = new Sprite(128, 64) : スキ ル 発 動 ボ タン の スプ ライ ト を 追加 


skillBtnSprite.image = game.assets[uiSkillBtnSprite]; 


中 略 
windowGroup.tl.scaleTo(l, 10, enchant.Easing.ELASTIC 本 EASEOUT). 
then(function() { 


skillBtnSprite.addEventListener(enchant.Event.TOUCH _ END, 


ボタ ン を 押し た 際 の イベ ント リス ナー を 追加 


function(params) { 


windowSprite.tl.fadeTo(0, 5).then(function() { 


game.popScene(); 
fune.player.controller.sndManager.playFX(sndClick); 
if (self.onSkill) { 

self.onSkill() 


}, 


これ で ステ ー タ スウ ィ ン ド ウ か ら 必 殺 技 (スキ ル ) の 実行 が で きる は ず で す 。 
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船長 : キャ プ テ ン 
攻撃 力 : 100 
防御 力 : 50 


移動 力 : 4 
攻撃 の 距離 : 3 
HP : 120/120 


XI 必 灯 以 の 共通 部 分 を 作る 


he scsi Sallesensicn ciaskcrclrc ic NE 


必殺 技 の 基本 の ルー ル は 、 原 則 と し て 次 の よう に し ます 。 


1. 1 つの ユニ ッ ト は 1 つの ミッ ショ ン で 必殺 技 を 1 回 だ け 使 用 で きる 
2. 必殺 技 を 使う と 自分 の ター ン が 終わ る 


最初 は この 2 つの ルー ル を 守り な が ら 、 実 際 に は 何 も 起 き な い 必殺 技 を BaseFune に 追加 する こと に し 
まし ょ う 。 そ れ を 拡張 し て それ ぞ れ の 船 特 有 の 必殺 技 を 作り 込み ます (サン プル は chapter_16 一 31 に 
あり ます )。 


ゞ ar BaseFune = Class.create(Group, { 
中 略 
activateSkill: function(onEnd) { 


self.usedSkill = true; 1. 一 つの ユニ ッ ト は 一 つの ミッ ショ ン 
uti1s.beginUTShie1d() : で 必殺 技 を 1 回 だ け 使 用 で きる 


this.processSkill(onEnd) 


}, 
スキ ル 実 行 メ ソ ッ ド 


activateSki11 を 実行 し て も 実際 に は 何 も 起 きま せん 。 し か し 、 そ れ ぞ れ の 船 で この クラ ス を 継承 す 
る こと に より 、 各 種 の 必殺 技 が 実行 で きる よう に な り ま す 。 
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必殺 技 を 作る 


processSkill: function(onEnd) { 
onEnd(); 
}, 


これ ら を ステ ー タ スウ ィ ン ド ウ の スキ ル ボ タン に 連動 させ ます 。 技 が 発動 し た ら タ ー ン を 進め ます 。 


ontouchend: function(params) { 


if (this.player.isActive()) { 


if (this.player.getActiveFune() == this) { 
var popup = new StatusWindow(this); 
中 賠 
Tar self 三 this: 


popup.onSkill = function() { 
if (self.usedSkill == false) { 
self.activateSkill(function() { 


self.player.controller.endTurn(); 


}) 
} 2. 必 殺 技 を 使う と 自分 の ター ン が 終る 


必殺 技 の 基盤 と な る 実装 は で きま し た の で 、 こ れ か ら は 小さ な も の か ら 大 が か りな も の まで 技 を 実装 し 
て いき まし ょ よう 。 
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| キャ プ テ ン の 投 


キャ プ テ ン に は 、 み ん な を サポ ー ト する よう に 回 復 技 を 付け ます 。 


@ OO | index.html "x Ey a sen 本 "し に 
と CC file:///Users/robert/Desktop/pirateTactics/enchant.js-builds-0.8.1/game/pirates/32/index.html | 三 


技 名 : セカ ンド ウィ ンド 
説明 : 味方 の 全 船 が HP の 
50% を 回 復 す る 
効果 
1. 味 方 を 全部 回 復 する 


er 


pr a 
| 


この 技 の 実装 は と て も 簡単 で す 。 自 分 の 船 す べ て に 体力 の 半分 を 計算 し て 回 復 さ せま す 。 


var CaptainFune = Class.create(BaseFune, { 
中 申 
processSkill: function(onEnd) { 
var count = this.player.getFuneCount(); 
for (var i=0; 1 < count; i1++) { ー 
CIT 
var fune = this.player.getFune(i); ETERL TL 
var toHeal = Math.ceil(fune.getHPMax() /2); 
fune.healDamage(toHeal) ; 


} 
onEnd(); 


Hs 
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必殺 技 を 作る 


| 攻撃 系 の 投 


= = = に = = = = I= = = 時 = = = = = = = = = = = = = = = = = ps = = = = = = = = = 


9 9 | indexnm ww し ( 
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技 名 : バレ ッ ト ス トー ム 
説明 : 自 分 の 攻撃 距離 以内 の 
船 を 全部 攻撃 する 
効果 “ 
1. 攻撃 可能 な 船 を チェ ッ ク ) 
[ ま バレ ッ ま スト ホー ム 和束 


2. 全 船 を 攻撃 する ミ i N 


Sa 
と 
ン / ャ 


w N ず すさ 


攻撃 系 は キャ プ テ ン の 技 に 近い で す が 、 和 距離 も チェ ッ ク が 必要 で す 。 そ し て ダメ ー ジ の 表現 と 沈没 の チ 
ェ ッ ク が 必要 と な り ま す 。 


var KougekiFune = Class.create(BaseFune, { 
processSkill: function(onEnd) { 
var damage = this.stats.attack; 
var count = this.player.controller.getNonActivePlayer(). 
getFuneCount(); 
for (var i1=0; 1 < count; ュ i++) ( < 逆 の すべ て の 船 に 対し | 
var fune = this.player.controller.getNonActivePlayer(). 
getFune(i); 
if (this.withinRange(fune.i, Eune.]) ) ( < 攻 軸 可能 距離 に あれ ば | 
var afterHp = Eune.tEakeDamaqe (damade) / 
var explosion = new Explosion(); - i 
explosion.x = fune.x +32; タメ ー ジ 


explosion.y = fune.y +32; 
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this.player.controller.sndManager.playFX(sndExplosion); 


game .currentScene.addChild(explosion); 


if (afterHp <= 0) { HP が 0 の 場合 は 沈没 


fune.sinkShip(); 
} 


} 
onEnd(); 


}) 


| 防御 系 の 投 
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技 名 : アイ ロン シー ルド 
説明 : 次 に 動く まで 
無敵 状況 に 入る 
効果 
| 1. ユニ ッ ト に 無敵 フラ グ を 
追加 する 
2. 技 を 使う と 無敵 を 

| = true に する 
3. 船 が 攻撃 され て も ダメ ー ジ 
| を 受け な い 
| 4. takeDamage の な か で 
| 無敵 の 状態 を 確認 し て 、 “ 

無敵 で あれ ば ダメ ー ジ は 無視 す 
5. 一 回 攻撃 され た ら 無 敵 状態 が 消え る 
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必殺 技 を 作る 


防御 系 の 必殺 技 の processski11 の 実態 は 単純 で す が 、 無 敵 状 況 を 再現 する た め に attackFune と 
takeDamage を 変更 する 必要 が あ り ま す 。 
ここ で は JavaScript 特 有 の 機能 で ある プ ブ プロトタイプ を 使っ て み ま し ょ う 。 


var KataiFune = Class.create(BaseFune, { 


initialize: function(id) { 


this.indestructible = false; 無敵 フラ グ を 作る 


}, 


中 略 

processSkill: function(onEnd) { processskill は 無敵 フラ グ を オン に する だ け 
this.indestructible = true; 
onEnd(); 


}, 
attackFune: function(otherFune) { 
this.indestructible = false; 


BaseFune.prototype.attackFune.call(this, otherFune); 


takeDamage: function(damage) 2 防御 系 の た め に takepamage を 再 定義 | 
if (this.indestructible) { 
return this.getHP() 
} else { 


return BaseFune.prototype.takeDamage.call(this, damage); 


} 
} 元 の takeDamage の 処理 を 呼び 出す 


this.indestructible = 


JavaScript は オブ ジェ クト 指向 の プロ グラ ミン グ 言 語 で す が 、Java や C 二 十 と 異な り 、 純 粋 な クラ ス 
で は な く 、 プ ロト タイ プ (prototype) を 使っ て オブ ジェ クト 指向 の 機能 を 実現 し て いま す 。 

プ ブ プロトタイプ は 、 直 訳す る と 「 試 作品 ] また は 「 見 本 ] に な り ま す 。JavaScript の プロ ト タ イ プ の 場 
合 ど ちら か と いう と 「 見 本 ] と いう 訳 の ほう が 合っ て いる か も し れ ま せん 。 

JavaScript の すべ て の オブ ジェ クト に は 、 プ ロト タイ ブ プ (見 本 ) が 用 意 さ れ て いま す 。 た と えば 上 記 
の コー ド の kataiEune は Baserune を プロ ト タ イ プ ブ と し て 作ら れ て いま す 。 オ ブ ジ ェクト に 定義 し て な 
い デ ー タ や メソ ッ ド が あっ て も 、 自 分 の プロ ト タ イ プ に あれ ば 参照 が 可能 で す 。 
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ao ド の 中 で は attackFune と takeDamage を 新た に 定義 ヒ し て いま す が 、 元 に な っ た オブ ジェ クト ( プ 
ロト タイ ブ ) の 機能 を 、 


BaseE'une . や Fo も totype . 上 akeDamade . ご al (this, damade) / 


と いう コー ド で 呼び 出し て いま す 。 こ うす れ ば 、 元 の クラ ス の 仕様 と 同じ 部 分 は いち いち 書き 直す 必要 は 
あり ませ ん 。 

今 ま で クラ ス の insta1ize の 中 で 親 クラ ス の コン スト ラク タ を 呼ん で いま し た が 、 こ の 部 分 で も プロ 
ト タ イ プ の 仕組 み は 使わ れ て いま す 。 


| 素早 さ 系 の 投 
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は 
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| 技 名 : ハリ ー ア ッ プ 

| 説明 : プレ イヤ ー は ター ン を 

| 2 つ 連 続 に と れる 

| 効果 

| も ニア ルアン フラグ を 
プレ イヤ ー に 追加 

] 2. 発動 する と 次 の 自分 の タ 

ー ン が 終っ た と き に 、 相 

手 を スキ ッ プ 


ーー 


これ は 船 の 実態 に 影響 し な い 技 で す 、 ど ちら か と いう と ゲー ム の ルー ル を 大 幅 に 変え て いま す (チー ト 
レベ ル ) 。 そ の た め 船 クラ ス 内 の 実装 は 簡単 で す が 、 実際 の 処理 は GameManager を 変更 し ます 。 
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必殺 技 を 作る 


var Haya1Fune = Class.create(BaseFune, { 
中 賠 
processSkill: function(onEnd) { 
this.player.controller.getFreeTurns(this.player, 2); 
onEnd(); 
}, 
}); 


getFreeTurns で 誰 を 何 タ ー ン 飛ば すか を 決め ます 。 こ の メゾ ッ ド を GameManager に 加え ます 。 


getFreeTurns: function(player, turns) { 
this.skipper = player; 


this.skipTurns = turns; 


ここ で 設定 し た プロ パテ ィ を startTurn 内 で 確認 し て 実際 に ター ン を 飛ば し ます 。 


startTurn: function() { 


var player = this.getActivePlayer(); 


if (this.skipTurns) { skipTurns が ある と き は 


if (player != this.skipper) { 
this.skipTurns--; 


return this.endTurn(); ター ン 終 る 


} 
player.setActive(true); 


this.updateTurn(); 


これ で 各 キ ャ ラク ター それ ぞ れ の 個性 的 な 必殺 技 が 実装 で きま し た 。 こ まで 来る と プレ イヤ ー 同 士 が 対 
戦 す る マル チ プ レイ ヤー 型 の ゲー ム と し て ほぼ 完成 し た こと に な り ま す 。 

し か し 、 こ れ だ け で は まだ CPU を 対戦 相手 と する シン グル プレ イヤ ー ゲ ー ム と し て は 完成 し て いま せ 
ん 。 パ ー ト 4 で は CPU 対 戦機 能 を 作る と と も に 、 ゲ ー ム の さま ざま な 仕上 げ を 行い た いと 思い ます 。 
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ゲー ム の 開始 時 に VS モー ド 
と スト ー リ ー モ ー ド を 選択 で 
きる よう に し ます 


Factory ク ラス を 作っ 
て オプ ジェ クト を 簡単 
に 作れ る よう に する ぼ 
が 。 ゲ ー ム オー バー の 
部 分 も 分 岐 さ せま す 


ア 「 訂 ここ か ら は 、 連 芋 証 次 の よう な ゲー ム 全 体 
NA 続 し て マッ プ を の 流れ を プロ グラ ミン 終了 状態 
5 クリ ア し て いく 還 グレ ましょ う 。 スト ー 回 還 sil 
スト ー リ ー モ ー リー モー ド で は クリ ア 還っ ュ スト ー リ ー 語 。 
ド の 作り 方 を 考 する と 次 の ゲー ム を 結 終了 処理 


えま し ょ う り 返 し ます 。 


// 本 章 で 勉強 する こと 


e ゲ ー ム スト ー リ ー モ ー ド を 加え て シミ ュ レ e Factory ク ラス を 使っ て デー タ か ら オ ブ 
ーション ゲー ム ら し くし よう ジェ クト を 作る 方 法 を 紹介 


e まず スタ ー ト 画面 の メニ ュー を 考え て みよ @ ゲー ム の 開始 と ゲー ム オ ー バ ー を 作り 込ん 
う で 完成 度 を 上 げ よ う 

e ステ ー ジ ご と の 登場 ユニ ッ ト を デー タ 化 し 
て みよ う 


今 ま で 私 た ち が 作 っ て きた ゲー ム は 人 間 同 士 が 交互 に 操作 を 繰り 返す チェ ス の よう な 対戦 用 ゲー ム に な 
っ て いま し た 。 し か し 、 い つ で も 対戦 相手 が いる と は 限り ませ ん の で 、 こ こ か ら は 一 人 で も 遊べ る 仕組 み 
を 追加 し て いき た いと 思い ます 。 
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スト ー リ ー モ ー 下 を 作ろ う 


- 
N| 

(た | スタ ー ト 画面 
トド = = = = f= EE i i= = = ME = 3 FE EE i FE EE EE i EE = f= b= i = KE Ei i EE EE FE EE EE EE EE 

この パー ト で は ゲー ム の シン グル プレ イモ ー ド と その た め の 画 面 起 移 を 用 意 し ます 。 最終 的 に は 19 章 
で 解説 する 人 工 知能 (Al) を 実装 する と 、 シ ング ルプ レイ の ゲー ム モ ー ド が 実現 し ます 。 

本 ゲー ム は 2 つの モー ド で 遊べ る よう に し まし ょ う 。 ひ と Q つ 目 は 今 ま で どおり の 対戦 モー ド で す 。 ご の 
モー ド で は 双方 の プレ イヤ ー が (た と え 対 戦 相手 が 人 工 知 能 の CPU で あっ て も ) 同じ よう な 4 隻 ひ の チー ム 
を 持っ て 勝負 し ます 。 ふ た つ 目 は スト ー リ ー モ ー ド で す 。 ご の モー ド で は 物語 の 流れ に 従っ て 、 プ レイ ヤ 
ー が ステ ー ジ を 進み ます 。 対戦 相手 は CPU で 、 ス テー ジ で 勝利 する と 、 新 た な ステ ー ジ に 進む 方 式 で す 。 
ゲー ム の 進み 具合 を 保存 する 方 法 に つい て は 18 章 で 説明 し ます 。 

ゲー ム の スタ ー ト か ら の 画面 の 流れ は 次 の よう に な り ま す 。 


M メ _ ーー の の 党 - し ( 
と ご 円 fle:///Users/rober/Desktop/pirateTactics/enchantjs-builds-0.8.1/game/pirates/head/in.… sy! 三 


図 17-1 ゲー ム の スタ ー ト 画面 


で は 最初 に スタ ー ト 画面 を 作り ます 。 ご この 画面 は 基本 的 に 以前 作っ た ステ ー タ ス 画 面 と 同じ よう な 作り 17 
に な り ま す (サン プル は ohapter_17 一 32 に あり ます )。 


var StartScreen = Class.create(Scene, { 


initialize: function(gameManager) { 
VS モー ド の 処理 


versusBtnSprite.addEventListener(enchant.Event.TOUCH _ END, 
function(params) { 
windowSprite.tl.fadeTo(0, 5).then(function() { 
gameManager.beginVersusGame(); 


gameManager.sndManager.playFX(sndClick); 
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game .popScene(); 


Py 


中 略 [トー リー ャ mi | 


campaignBtnSprite.addEventListener(enchant.Event.TOUCH END, 
Funo モ キュ on(params) { 
windowSprite.tl.fadeTo(0, 5) . モ 上 hen(Euno モ 1on() { 
gameManager.beginCampaignGame(); 
gameManager.sndManager.playFX メ (sndClick) ; 
game.popScene(); 
}); 
}); 
}, 
}) 


押し た ボタ ン versusBtnSprite と campaignBtnSprite に よ っ て それ ぞ れ の モー ド で ゲー ム を 開始 
する StartScreen を 作り まし た 。 こ れ で スタ ー ト 画面 か ら 2 る つの モー ド に 入れ る よう に な り ま す 。 
game . onload で は 最初 に この 画面 が 表示 され る よう に な っ て いま す 。 


game .onload = function(){ 


var sceneGameMain = new Scene(); 


var manager = new GameManager(); 


var mapDisplayData = [ 


l} 


var map = new GameMap(sceneGameMain, mapDisplayData); 


manager.setMap (map) ; 
var frameUI = new FrameUI(sceneGameMain); 


manager.setFrameUI(frameUI) ; 


game .pushScene(sceneGameMain); ゲー ム に シー ン を 追加 


(は MX スルメ スルメ メル メ メル メ スル メ メル ミ スルメ メ ルミ メル トミ メス ルミ メト ルミ メ メメ ルミ メル ミ メル ルミ メス ルミ メ スルメ スルメ スル メ メル K メル ミ 1) 


スト ー リ ー モ ー ド を 作ろ う 


new StartScreen(manager); モー ド 選 択 画面 を 表示 


1 


game.start(); 


}; 


a 
| 
| VS モー ド の 実装 
VS モー ド の 部 分 は ここ まで 作っ て きた 2 プレ イヤ ー の ゲー ム の まま で す の で 、 あ まり 変更 は あり ませ 
ん 。 メ ソ ッ ド の 名 前 な ど を 変更 し て いま す (サン ブル は chapter_17 ~ 32 に あり ます )。 


beginVersusGame: function() { 


this.mode = "versus":; 


船 の 初期 の 位置 


var startPositions = { 
playerl: [ 
O07 I Sk 0; J Ol (LL; J Uh, 邊 : 2 J 8} 
] , 
player2: [ 
3 12 EE 0 も ti 10。 JE OE i LS 1 2 靖 /。 7) 8 
] , 
} 


this.setStartPositions(startPositions); 


var playerl = new GamePlayer(1, {name:" プ レイ ヤー1"}); 


this.addPlayer(playerl); 


プレ イヤ ー 1 に 船 を 4 つ あ げ よ う 


player1 .addEune(new Cap モ arnFune(1)) / 
Player1.addEune(new Haya1Fune(2) ) ; 
Player1 .addEune(new KataiFune(3)); 
Player1 .addEFune(new Koudek1Fune(4) ) / 


this.placePlayerShips(playerl) / 
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var player2 = new GamePlayer(2, {name:" プ レイ ヤー2"}); 
this.addPlayer(player2) ; 


プレ イヤ ー 2 に 船 を 4 つ あ げ よ う 


player2.addFune(new CaptainFune(l)); 
Player2.addE'une(new Haya1Fune(2) ) / 
Player2.addEFune(new KataiFune(3)); 
player2.addFune(new KougekiFune(4)); 


this.placePlayerShips(player2); 


this.sndManager.playBGM() ; 
this.startTurn(); 


}, 


に 

| F 

| スト ー リ ー モ ー ド の 実装 

| 
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スト ー リ ー モ ー ド は 今 ま で の ゲー ム と 異な る と ころ が 多い の で 、 新 し く 開 発する 部 分 も か な りあ り ま す 。 

最初 は 、 新しい モー ド の 入り 口 と な る メソ ッ ド beginCampaignGame を 用 意 し ます 。 プ レイ ヤー 1 は 前 
の beginVersusGame と あま り 変 わり ませ ん が 、 プ レイ ヤー2 の 追加 と 船 の 設定 は sstupstage で 行い 、 
ステ ー ジ に 応じ て 船 の ライ ン ナ ッ プ を 変化 させ られ る よう に し ます 。 


beginCampaignGame: function(stage) { 


this.mode = "campaign"; 


var playerl = new GamePlayer(1, {name:" プ レイ ヤー1"}) ; 
this.addPlayer(playerl); 


プレ イヤ ー 1 に 船 を 4 つ あ げ よ う 


player1 .addEune(new Cap モ anFune(1)) / 
Player1 .addEune(new Haya1EFune(2) ) ; 
Pl1ayer1 .addEune(new KataiFune(3)); 
Player1 .addEune(new Koudek1F une (4) ) / 


196 (は MX スルメ スルメ メル メ メル トメ スルメ メル ミ メ スルメ メル ミ メル トミ メメ ルミ メル トミ メ メル ミ メル ミ メル ミ メス ルミ メ メル K ミ メス ルミ スル メ メル K メル ミ 1 は) 


スト ー リ ー モ ー ド を 作ろ う 


船 の 初期 の 位置 


var startPositions = { 
playerl: [ 
t エ 2 0。 ]:) BB 11: 0 。 33 6 LS 1 FF L277 JS 8} 
] , 
} 
this.setStartPositions(startPositions); 


this.placePlayerShips(playerl); 


if (stage) { 
this.setupStage(stage); 雪 ステ ー ジ セッ ト ア ッ プ の た め の メ ソ ッ ド を 実行 
} else { 


var playerl = new GamePlayer(2, {name:" 英 "}) 


this.addPlayer(playerl); 
ステ ー ジ デー タ が な い 場 合 は ステ ー ジ 1 か ら 


this.setupStage(l); 


this.sndManager.playBGM() / 
this.startTurn(); 
}, 


setupStage の 中 身 は 次 の よう に な り ま す 。 ち ょ っ と 変わ っ た と ころ と し て は startPositions の そ 
れ ぞ れ の 要素 typs に 船 の 種類 と 初め の 位置 が 文字 列 で 入っ て いる こと で し ょ うか 。 こ の 文字 列 を 
funeFactory の メソッド に 渡す と 、 適 切な 船 の オブ ジェ クト が 作ら れる よう に な っ て いま す 。 


setupStage: function(stageId) { 
this.stageId = stageId; 


var StageData = [ 
{ 


startPositions: [ 


{ttype: captainn Ti 12 ]5 OF}, 


startPositions: [ 


{type: "captain" iL 12, J 0}, 


(スル X メル K スル メ メル ミ メル メ メル トミ スル ミ メ メス ルミ メス ルミ メル ミ メス ルミ コメ ルミ メ メス ルミ メ スルメ メル K ム メル ミ メ メル メメ メス ルミ メ メル ミミ ルミ メ ルミ 1) 
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{type: "hayai エエ > 2/。 J 2}, 


}, 


var player2 = this.getPlayer(2); 今 は 2 つの ステ ー ジ を 繰り 返し て 


遊べ る 


O 


var 5 上 adeTndex = (stageIld-l) も StageData.length; 
var stageData = StageDatal[stageIndex]; 
for (var i=0; 1< stageData.startPositions.length; ュ 1++) { 


var entry = stageData.startPositions[il; 


var fune = this.funeFactory(entry.type); 
fune.originXx = 32+16: 

Fune.soaleX = -1: 

player2.addFune(fune) ; 
this.map.addChild(fune) ; 


this.map.positionFune(fune, entry.i, entry.]); 


}, 


上 で 使わ れ て いる funeFactory は 名 前 の と お り 工 場 (Factory) の よう に 、 与 えら れ た デー タ に よっ 
て それ ぞ れ の 船 を 作っ て くれ ます 。Ffactory ク ラス は 地味 で す が 、 ゲ ー ム の プロ グラ ミン グ で は と て も 
よく 見 か ける 方 法 で す 。factory と デー タ を 使っ て 異な る ステ ー ジ な ど を 楽に 作る こと が で きま す 。 
funeFactory の 中 も 見 て み ま し ょ う 。 


funeFactory: function(name) { 
switch(name) { 

case "captain": 

return new CaptainFune(l); 
case "hayail'": 

return new HayaiFune(2); 
case "katai": 

return new KataiFune(3); 
case "kougeki": 


return new KougekiFune(4); 


}, 


メメ メス ルミ メル K ム メル ミ メル トメ スル トミ スルメ メル ミ メメ メル トミ メス ルミ メル トメ メル メ メメ ルミ メ スルメ メル メ スルメ メル トミ メル K スル K メス ルミ 1) 


スト ー リ ー モ ー ド を 作ろ う 


与え られ た 文字 列 に よっ て 異な る 種類 の 船 を 生成 し ます 。 ど の ゲー ム で も 基本 的 に は この よう な デー タ 
を 元 に 各 ス テー ジ 用 の オブ ジェ クト 生成 する 方 式 が 一 般 的 で す 。 ひ と つ ひ と つの ステ ー ジ に 別 の クラ ス や 
デー タ を 用 意 し た りす る こと は あま りあ り ま せん 。 


(た | 分 岐 に よる ゲー ム 終 了 の 変更 


に トート ーー トー トー ニー ニー トー ニ ト ニ ニー ニニ に ニニ に ニニ に に ビビ ェ EE テニ ビビ EE ビニ EE ふふふ テニ 


ゲー ム の 開始 は 整理 で きま し た の で 今度 は ゲー ム 終 了 ま わり を 整理 し まし ょ う 。 さ き ほ どの スタ ー ト の 
フロ ー に 合わ せ 、 終 了 の フロ ー を 含め た ゲー ム の 流れ は 次 の よう に な り ま す 。 


繰り 返し 


図 17-2 ゲー ム の 開始 か ら 終了 まで の 流れ 


今 ま で の senarurn の 終了 条件 の 判定 の 部 分 を 変更 し て 、2 つ の モー ド の 終了 処理 を 加え ます 。 


endTurn: function() { 
var player = this.getActivePlayer(); 
player.setActive(false) ; 


var winner = this.getWinner(); 
if (winner) { 
‘Yariseltl= this; 


setTimeout(function(){ 


if (self.mode == "versus") { VS モー ド 
self.versusOver(winner); 
} else if (self.mode == "campaign") { スト ー リ ー モ ー ド 
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self.campaignOver(winner); 


} 
}, 1000); 


self.mode が "versus" か "campaign" に よっ て 終了 処理 を 切り 替え る よう に な っ て いま す 。 


VS モー ド の 終了 画面 


トニ ーー (| TE [EN [il IE (i | [El i | I Ea ET [i Fa [EH [FE | EE ーー トニー トー ニー テリ ーーー [Ee [Ea CO [Ol Ta ME Ee [i CE [i 


スタ ー ト と 同じ よう に 対戦 モー ド の 終了 も 大 き な 変 更 は あり ませ ん 。 モ ー ド が 分 か れ た の で それ に 合わ 
せ て すこ し 整理 し まし た 。 


図 17-3 対戦 モー ド の 流れ 


versusOver: function(winner) { 
var touchable = new ShieldWindow(this); 


utils.beginUIShield(); 


touchable.onTouch = function() { 
location.reload(); 


hy 


var playerBanner = new Sprite(512, 256); 


LE (wihnner id ーー 時) 1 
playerBanner.image = game.assets[uiPlayerBannerl]; 勝っ た プレ イヤ 
} else if (winner.id == 2) { 
playerBanner.image = game.assets[uiPlayerBanner2]; 


200 (は AX スルメ スルメ メル メ メル K メス ルミ メ メル K メ メル トミ メル ミ メル トミ メル トミ スルメ メル ミ メル ミ メ スルメ メス ルミ メル ミ メス ルミ スル メ メル K メル ミ メス 1. 


スト ー リ ー モ ー ド を 作ろ う 


var self = this; 
playerBanner.tl.fadeIn(20).delay(30) .fadeOut(10).then(function() { 


game .currentScene.removeChild(playerBanner); 


var resultBanner = new Sprite(512, 256); 


resultBanner.tl.fadeIn(20).then(function(){ 
utils.endUIShield(); 
}); 
}); 
}, 


スト ー リ ー モ ー ド の 終了 画面 


= = = = = = = [= = = = = = = = = = == EE = f= l= = = == = = [= = = = = = ER EE 記 = 


スト ー リ ー モ ー ド は 、 プ レイ ヤー 1 が 勝っ た か 負け た か に よっ て 、2 つ の 処理 に 分 け ま す 。 


a pe 


図 17-4 スト ー リ ー モ ー ド 


プレ イヤ ー 1 が 勝っ た と き は 次 の ステ ー ジ に 進み ます 。 


は LTX スルメ スル メ メル K メル K メル K メル ルミ メル トミ スルメ メル メ コスト ルミ スルメ メル k メ メス ルミ メル K メス ルミ メル ミ メ メル メ メル メ メル X メル ミ ミ 1) 201 


campaignOver: function(winner) { 
var touchable = new ShieldWindow(this); 


utils.beginUIShield(); 


var playerBanner = new Sprite(512, 256); 


playerBanner.image = game.assets[uiPlayerBannerll]; 
中 了 略 


var self = this; 


プレ イヤ ー 1 を 表示 


playerBanner.tl.fadeIn(20).delay(30) .fadeOut(10).then(function() { 


game.currentScene.removeChild(playerBanner); 


var resultBanner = new Sprite(512, 256); 

if (winner.id == 1) { 
resultBanner.image = game.assets[uiWin]; 
touchable.onTouch = function() { 


self.refreshPlayer(winner); 
self.setupStage(self.stageId +1): 
self.startTurn(); 


多 


re freshPlayer の 部 分 は 次 の よう に な り ま す 。 


reFreshPlayer: function(player) { 
for (Var funeIndex = 0: funeIndex < player.getFuneCount(); EuneTndex++) { 


var fune = player.getFune(funeIndex); 
var recoverHp = fune.getHPMax(); 
fune.healDamage(recoverHp); 
fune.refreshSkill(); 

} 

this.placePlayerShips(player); 

this.turnCounter = O0; 


this.skipTurns = 0: 
}, 
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スト ーー リー モー ド を 作ろ つう 


プレ イヤ ー 1 が 負け た ら 、 対 戦 モ ー ド と 同じ よう に re1oaa で 最初 の スタ ー ト 画面 に 戻り ます 。 


campaignOver: function(winner) { 


中 賠 
} else if (winner.id ニー 2) ( < 敗北 | 
resultBanner.image = game.assets[uiLose]; 
touchable.onTouch = function() { 
location.reload(); 
}; 
} 


resultBanner.tl.fadeIn(20).then(function(){ 


utils.endUIShield(); 
的 ) 
}9/ 


VS モー ド は これ で ほぼ 完成 し まし た 。 で も スト ー リ ー モ ー ド に は まだ いろ いろ と や る こと が 残っ て い 
ます 。 次 の 草 で は スト ー リ ー モ ー ド の 進み 具合 を 保存 する 方 法 を 考え まし よう 。 
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外部 に デー タ を 保存 し て | 
お く 機 能 を 作っ て 、 自動 | 
セー プ を 実現 ! 


ベス トド トー リー モー ド で は 、 モ 一 
ブ デ ー タ の 読み 込み か 新規 作 
成 を 選択 で きる よう に し ます 


sndManager に 音量 を 


保存 し て お く 機 能 を 追 叶 


jStorage を 利用 し ます 。 難 し い 機 能 は ラ 
イブ ラリ を 活用 し て 楽に 作り 込み まし ょ う 


/ 本 章 で 勉強 する こと 


@ 現在 の 状態 で は ブラ ウザ を リロ ー ド する と @ ステ ー ジ が 始ま る た びに ステ ー タ ス を 自動 
ゲー ム が すべ て 初期 化 さ れ て し まう で 保存 し て くれ る 仕組 み を 作り 込 も う 


@ リロード し て も ステ ー ジ の 状態 が 保存 され @ 音量 の デー タ も 自動 で 保存 させ る よう に し 
る よう に し た い よう 
@ デー タ の 保存 に は ブラ ウザ の 違い を 吸収 し 
て くれ る jStorage フ レー ム ワ ー ク を 利用 
レ ま し ょ う 


スト ー リ ー モ ー ド は それ ぞ れ の ステ ー ジ が 進む に し た が っ て 対戦 相手 の デー タ が 変化 し て いき ます 。 そ 
の た め ゲ ー ム の 進み 具合 を 何 か の 方 法 で 保存 し て お く 必 要 が あり ます 。 こ うし て お か な いと 、 ブ ラウ ザ か 
ら ゲ ー ム を リロ ー ド する た びに 、 始 め の 状 態 に 戻っ て し まい ます 。 そ れ ぞ れ の ステ ー ジ を 作り 込む お 前 に ゲ 


デー タ を 保存 する 


ー ム の 進み 具合 を 保存 する 仕組 み を 作っ て お きま し ょ う 。 


| テー タ 保 存 の た め の 仕 組み 「jStoragel 


| ニー | | [Es a | ED (ES = Pd ET |  Tp | 


サウ ンド の と き と 同 じ く 、 デ ー タ の 保存 は ブラ ウザ ご と に 方 式 が 異な り ま す 。 そ の た め 、 ブ ラウ ザ の 違 
い を 吸収 し て くれ る デー タ 保 存 の た め の フ レー ム ワ ー ク を 採用 し た いと 思い ます 。 

jStorage (https://github.com/andris9/jStorage) は ブラ ウザ の デー 人 る 操作 を 簡単 に し て くれ る フ 
レー ム ワ ー ク で 、 代 表 的 な ブラ ウザ に は ほとん ど 対 応 し て いま す 。Web サ イト を 見 る と jStorage に は い 
ろ い ろ な 機能 が あり ます が 。 こ こ で 使う の は 基本 的 に 次 の 機能 だ け で す 。 


SG (key , value[, opt1ons] ) 
デー タ を 保存 する 。 key は デー タ の 名 前 、value は 保存 し た い デ ー タ 。 デ ー タ は 文字 列 、 数 
字 ま た は 一 部 の オブ ジェ クト が 利用 で きる 


get (key [ , default]) 
デー タ を 読み 込む 。key は デー タ の 名 前 、default の 部 分 に は デー タ が な か っ た と き に 返す 
デフ ォ ル ト の デー タ を 指定 で きる 


deleteKey (key) 
特定 の key に 紐 付け られ た デー タ を 消す 


AA 
| ー 
(| 音量 を 記録 する 
人 
ゲー ム デ ー タ の 保存 の 仕組 み 作る 前 に 、 シ ンプ ブル な 課題 で jStorage の 機能 を 見 て み ま し ょ う 。 今回 の 
ゲー ム で は 音量 の 設定 は で きま し た が 、 ゲ ー ム を ロー ド す る た びに 毎回 設定 し 直す 必要 が あり まし た 。 そ 
れ で は ちょ っ と 不 親切 で す の で 、 プ レイ ヤー が 選ん だ 音量 の 設定 を 自動 的 に 保存 する よう に 仕様 を 変更 し 
て み ま し よう 。 
まず 、jStorage を main.js の 中 で 使え る よう に する た め に 、index.html を 編集 し て 次 の よう に し て くだ 
さい (サン プル は chapter_18 一 34 に あり ます )。 


<script type='text/javascript' srcec='../../../shared/javascript-astar/astar. 
js'></script> 
<script type='text/javascript' src='../../../shared/jStorage-master/jstorage. 


jStorage の 読み 込み 


スルメ スル トム スル トメ メル ミ スル ミ ユル トミ メス ルミ メス ルミ メ メス ルミ メ スルメ ユル トミ メス ルミ メル トミ メル トミ メス ルミ スル トメ メス ルミ メス ル トミ スルメ スル ミ スル ミ メメ] 
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js'></script> 


<sctipt type="text/javascript" src=" ../../../../bu11d/enohan 七 ..]5"> く /SC エ ュ p キ > 


記述 は 、aster.js を 利用 する と き と 同 じ で す 。 あ ら か じ め jstorage.js を 読み 込ん で お く こ と で 、main. 
js 内 で 利用 可能 に な り ま す 。 
準備 が で きた ら 、main.js 内 の SoundManager の コー ド を 変更 し ます 。 


var SoundManader = Class.create(Sprite, { 
initialize: function() { 
sprite.call(this, 1, 1); 
this.volume = $§.]Storage.get("sound volume", 0.5); 
this.bgmPlaying = false; 
}, 


volumeUp: function() { 


$.]Storage.set("sound volume", this.volume); ボリ ュー ム を 上 げた ら 保 存 


1, 


ゞ olumeDown: function() { 


$.]Storage.set("sound volume", this.volume); < 計 ボリ ュー ム を 下げ た ら 保 存 


ご 覧 の と お り と て も シン ブル で す 。3 ュ storage . ge も ("sound vo1ume" , 0.5) : の 部 分 で 、jStorage 
か ら ボ リュ ー ム デー タ を 取り 出し て (デー タ が な けれ ば 0.5 を 設定 ) 音量 と し て 設定 し て いま す 。 

ちょ っ と 不思議 な の は $.jstorage と いう オブ ジェ クト の 名 前 で し ょ うか 。 頭 に ある $. が 妙 な 感じ に 
見 えま す が 、JavaScript の 変数 名 で は や $ が 数 字 や 文字 の よう に 使え ます (言語 に よっ て は この よう な 
特殊 な 文字 が 使え な いこ と も あり ます )。$ を 付け る の は jQuery と いう 汎用 的 な JavaScript の フレ ー ム 
ワー ク (ゲー ム 用 で は な く Web ペ ベー ジ 用 と し て 広く 使わ れ て いま す ) の 一 般 的 な 命名 規則 で す 。 
jStorage も jQuery を 意識 し て いる の で 、 同 じ 命 名 規則 を 採用 し て $ .JStorage に な っ て いる の で す 。 
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デー タ を 保存 する 


し 
I 、 本 
(x | ゲー ム の セー ブ デ ー タ の 保存 
トー | 一 一 | 一 一 | 一 一 | 一 | 一 一 | 一 | 一 | 一 一 | 一 | 一 一 | 一 一 | 一 | 一] 一 | 一 (一 | 一 | 一 | 一 | 一 一 | 一 一 | 一 一 一 | 一 一 一 一 | 一 | 一 一 | 一. 一 | 一 | 一 一] 一 ニニ! 一 ト 一 1 ニニ 一 | 一 1 ニ 
で は 本 章 の 本 題 に 入り まし ょ う 。 ゲ ー ム の 進捗 デー タ を 保存 する 仕組 み を 作り ます 。 
新しい ステ ー ジ を セッ ト ア ッ プ する と き に 最新 の 進捗 状態 を 記録 する こと に し ます 。 今回 は ステ ー ジ の 
始ま り の と きだ け 保 存 し ます 。 ス テー ジ 途 中 の 状況 を 保存 する の も 同じ 方 式 で で きま す が 、 か な り 手 間 が 
か か り ま す の で 、 今回 は シン プル に ステ ー ジ 単位 で 保存 する 方 式 に し まし ょ う (サン プル は chapter_18 
ー 35 に あり ます )。 


setupStage: function(stageId) { 
this.stageId = stageId; 


var saveData = { 
stageId: stageId, 保存 用 の オブ ジェ クト を 作る 
funeList: [], 


}; 
var player = this.getPlayer(l); 
for (var funeIndex = 0; funeIndex < player.getFuneCount(); EuneTndex++) { 


var fune = player.getFune(funeIndex); 


saveData.funeList.push(fune.getId()); 今回 は 船 の 種類 だ け を 保存 し ます 


C 録 


} 


$.]Storage.set("save data", saveData); 5 を 


saveData と いう オブ ジェ クト に は stagera に 現在 の ステ ー ジ ID と 現在 プレ イヤ ー が 持っ て いる 船 の 
種類 を 記録 する こと に し まし ょ う 。 こ れ で デー タ の セー ブ が 自動 化 さ れ ま し た 。 
スト ー リ ー モ ー ド を 始め る と き に は セー ブ デ ー タ を 読み 込み 、 前 回 の ステ ー ジ の 初期 状態 に 戻し ます 。 


beginCampaignGame: function(stageId) { 


this.mode = "campaign"; 


var funeList; 


var saveData = $§.jStorage.get("'save data"); ここ で 読み 込み 
if (saveData) { 


\ -ー 叶 = 
stageTd = saveData.stageId; 保存 し て いた stagera を 使う 
funeList = saveData.funeList; 保存 し て いた 船 の 種類 を 使う 


(スル XK スルメ スルメ メル メ メル K メル メ メル K メ メル トミ メス ルミ メル ミ メル トミ メル トメ メル メ ム スルメ メル K ム メル ミ メ メル メメ メス ルミ メ メル ミ メル ミ メル ミ 1) 
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} 


var playerl = new GamePlayer(1, {name:" プ レイ ヤー1"}); 
this.addPlayer(playerl); 


if (funeList) { 
for (var funeIndex = 0; funeIndex < funeList.length; funeIndex++) { 
var fune = this.funeFactory(funeList[funeIndex]); 
playerl.addFune(fune) ; 
} 


) else {「 プ レイ ヤー 1 に 船 を 4 つ あ げ よ う 
playerl.addFune(new CaptainFune(l)) ; pm m 
i な か っ た 川 
player1 .addEune(new Haya1Fune(2)) Funeris そ が な か っ つた と き の 処 埋 


player1 .addEFune(new KataiFune (3) ) / 
player1 .addEune(new Kougek1Eune (4) ) 


save data と い う キ = デ a タ を 引 き 出 し 8 8 8 / meexhm *\ 


を で fie:///Users/robert/Desktop/pirateTactics/enchant.js-builds-0.8.1/game/pirates/35/index.html >? 三 


stageId と funeList を 展開 し ます 。 

これ で スト ー リ ー モ ー ド の デー タ を 引き 継ぐ で よう に 
な り ま し た 。 た だ し 、 現状 で は 対戦 に 負け て も 同じ ス 
テー ジ が 継続 され ます 。 本 当 は 対戦 に 負け た ら は じ め 
の ステ ー ジ に 戻る よう に し た い の で 、 最 初 の スタ ー ト 
画面 周り を 拡張 し まし ょ う 。 

スト ー リ ー モ ー ド を 選ん だ あと 、 も う 1 つ 画面 を 挟 
ん で 保存 デー タ が あれ ば | ロー ド す る 」 と 「 ニ ュー ゲ 
ー ム を 始め る 」 と いう 選択 が 表示 され る よう に し ます 。 


var Campa1dnSoreen = Class.create(Scene, { 


initialize: function(gameManager) { 


var saveData = $§.jStorage.get("save data"); 保存 デー タ が ある か どう か を 確認 


if (saveData) { 


continueBtnSprite.addEventListener(enchant.Event.TOUCH END, 
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デー タ を 保存 する 


function(params) { 


gameManader.bed1nCampa1dnGame () ; スト ー リ ー モ ー ド 開始 


})/ 
} 
newBtnSprite.addEventListener(enchant.Event.TOUCH _ END, 


function(params) { 


$.]Storage .de1eteKey( "save data'") ニュ ー ゲ ー ム の と き は 保存 デー タ を 消し ます 


gameManager.beg1nCampa1g9nGame () : < 還 スト ー リ ー モ ー ド 開始 


9 用 
}, 
}) 


スト ー リ ー モ ー ド で 負け た ら ゲ ー ム の セー ブ デ ー タ は 初期 化し ます 。 ま た 遊ぶ と き は ステ ー ジ 1 か ら 始 
まり ます 。 


campaignOver: function(winner) { 


var resultBanner = new Sprite(512, 256); 
rfl(winnersi1d ニー 1) { 


es プレ イヤ ー 1 が 勝っ た と き の 処 理 
} else if (winner.id == 2) 1 負け た と き の 処 理 


resultBanner.image = game.assets[uiLosel]; 


touchable.onTouch = function() { 


S .]Storage.deleteKey('save data"); 


location.reload(); 


| 
} 


これ で デー タ 保 存 の 仕組 み は 完 成 し ま し た 。 次 は いよ いよ 、 対 戦時 の ロジ ッ ク の 実装 を 考え て み ま し ょ 
う 。 ご これ を 作り こむ お こと で 、 コ ンピュータ を 相手 に 一 人 で プレ イ で きる 本 格 的 な ゲー ム に な り ま す 。 
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| vs モー ド で も 対 Al 


| 


いよ いよ Al に よる 
対戦 モー ド を 作っ 
て 見 まし ょ う 。Al 
が 自動 で 船 を 動か 


本 草 で 勉強 する こと 


eAl (人 工 知能 ) の 基礎 知識 を 身 に 付け よう 
@ 人 に は 強い Al と 弱い AI が ある が 、 ゲ ー ム 


の 場合 は 弱い Al に 属す る 


@ 思考 を 表現 する 方 法 と し て ステ ー ト マシ ン 
と いう 手法 を 使う 


ee 》 


| ステ ー ト マシ ン と いう 方 法 を 使っ 靖 還 較 還 ツジ / 
て 、 ゲ ー ム の [序盤 」 | 中 盤 」「 終 盤 」 V6 
で 思考 ロジ ッ ク を 切り 替え ます 


ーー 


で も 本 格 的 な Al は 
作り ませ ん 。 最小 
限 の 思考 パタ ー ン 
』 を プロ グラ ミン グ 
sl し て 「 い か に も 考 
品 えて いる よう な 」 
仕組 み を 作っ て み 
よう 


三友 WWF- 


ーー cc て 


| 
1 a 


@ ゲー ム の 段階 を 「 序 盤 」「 中 盤 」「 終 盤 」 と 
位置 付け て 、 条件 に よっ て 状態 (ステ ー ト ) 
を 変化 させ る 

e ス テー ト ご と に ユニ ッ ト を 動か す ル ー ル を 
作ろ う 

@ つい で に 、 対 戦 モ ー ド で も AlI と 対戦 で きる 
よう に し て お こう 


第 1 章 で も 説明 し て いま す が 、Al (Artificial Intelligence : 人 工 知 能 ) は コン ピュ ー タ の 歴史 の 初期 
の ころ か ら 研 究 対象 と な っ て いま し た 。 そ の 後 、 何 十 年 か か か り ま し た が 、 現在 で は チェ ス や 将棋 の 人 工 
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Al 対戦 機能 を 実装 し よう 


知能 は 最強 の 人 間 の プレ イヤ ー に も 勝て る と ころ まで 進化 し て いま す 。 


| 強い Al と 弱い Al 


gs es IP CE FE | ai TE I ll IP] (EC I i [El Em [i [FE CE I = EE [| FPS I | CN | FE (EE = EE | Ce [5 | 


ケ ゲー ム で 使う Al、 和 将棋 の 世界 の 最強 の Al、 医 学 分 野 に お ける 病気 判定 の 補助 、 郵 送 物 の 宛先 を 判定 し て 
くれ る Al な ど は どれ も 駿 い Al (Weak Al) と 呼ば れる も の で す 。 これら は 人 間 の 能力 の 一 部 を ソフ トウ 
ェ ア で 再現 する 目的 で 開発 され て いま す 。 

一 方 、 強 い AI(Strong AI) は SF に 出 て くる よう な 人 間 と 同じ くら い の 汎 用 性 を 持つ Al で す 。 映 画 12001 
年 宇宙 の 旅 】」 に 出 て くる コン ピュ ー タ HAL9000 は 1970 ~ 80 年 ご ろ の 研究 者 が 2000 年 まで に 実現 で 
きそう な も の と し て 考え た 強い Al で し た 。 も ちろ ん 、 実際 に は 完全 な 強い Al まだ し ば らく 実現 し な いと 思 
われ ます 。 現 代 の 強い Al は 、 ま だ 虫 の レベ ル を 完全 に 再現 する くら いま で に し か 進化 し て いま せん 。 

今回 作る よう な ゲー ム の 場合 は も ちろ ん 弱い AI で 十分 で すか ら 、 本 書 で は AlI の 本 当 に 深い と ころ に は 触 
れ ま せん 。 


a 
(た | ゲー ム に お ける Al の 目的 
ーー 
例外 も あり ます が 、 一 般 的 な ゲー ム の Al は 一 人 で 遊ぶ プレ イヤ ー の 対戦 相手 に な る よう 作ら れ て いま 
す 。 多 く の ゲ ー ム に は 何ら か の 戦闘 (勝負 ) の 要素 が 含ま れ ま す 。 ゲ ー ム AI は 、 戦 闘 に お ける 敵 の 振る 舞 
い を より 人 間 ら し く 見 せる た め に 作ら れ ま す 。 

ゲー ム の Al も 大 きく 2 種類 に 分 か れ ま す 。 ひ と つ は チェ ス や 将棋 な どの ゲー ム に お ける 「 強 い プ レイ ヤ 
ー」| の 再現 を 目的 と し た Al で す 。 た だ し 、 コ ンピュータ と 人 間 の 対戦 の 場合 は 、 人 間 側 が 公平 さ を 感じ る 
よう な 調整 も 必要 で す 。 た と えば 、FPS (First Person Shooting : プレ イヤ ー の 視点 を 再現 し た シュ 
ー テ ィング ゲー ム ) の 場合 、 NPC (Non Player Character : コン ピュ ー タ に 操作 され て いる ゲー ム 中 
の 登場 人 物 ) は 人 間 の 能力 を 超え た 完璧 な 射撃 も で きま す が 、 そ れ で は 公平 さ が 感 じ ら れ ませ ん 。 

も う ひ と つの Al は RPG の 敵 キ ャ ラ の よう な 比較 的 シン プル な Al で す 。 こ れ ら は ゲー ム の 進行 上 適度 に 
敵対 し て きま す が 本 気 で プレ イヤ ー を 全 減 させ る よう な こと は し ませ ん 。 こ ご の よう な Al は アド ベン チャ ー 
ゲー ム の 雑魚 キャ ラ な ど で 使 われ ます 。 ゲ ー ム に 大 切な の は 楽し く あ る こと で す 。 ゲ ー ム AI は 最終 的 に ユ 
ー ザ ー か ら 見 て 知性 が 感じ られ る か 、 ゲ ー ム プレ イ が 心地 よい か を 重視 し て いる た め 、 通 常 の Al と は 手法 
が 大 きく 異な り ま す 。 

本 式 の Al で ある 必要 は あり ませ ん し 、 目 的 の 範囲 で チー ト (も と も と は 「 覗 き 見 」 の 意味 で 、 本 来 見 ら 
れ な い は ず の 相手 の ひ の ス テー タス を 読み 取る よう な 方 法 ) も 許容 され る で し ょ う 。 

この 本 で は この よう な 、 ち ょ っ と だ け 強 い 対 戦 相手 に な る Al を 作る こと に し ます 。 


(メル K メ メス ルミ メス ルミ メル ミ メル メ メル トミ メス ルミ メ メル ミ メル た メル ミ メル トミ メル メ メル メ メス ルミ メ スルメ メル k メ メス ルミ メル K ユメ ルミ スル ミ メル ミ え 1) 
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am 
l s 
| AI の デザ イン ー ト ッ プ ダウ ン と ボトム アッ プー 
ii 
Al 作成 の アプ ロー チ に は 大 きく トッ プ ダ ウン (Top Down) と ボトム アッ プ (Bottom Up) の 2 つの 
手法 が あり ます 。 そ の 名 の と お り ト ッ プ ダウ ン 式 は 組織 の 一 番 上 の モノ (Al) が 部 下 (ユニ ッ ト ) を コン 
トロ ー ル し ます 。 対戦 糸 の Al に は 戦略 が 必要 と され る の で トッ プ ダ ウン アプ ロー チ を と る こと が 多い で す 。 
ボトム アッ プ 式 は それ ぞ れ の ユニ ッ ト が 自分 で 判断 し て 動く 方 式 で す 。 こ れ は 動物 や 魔物 の よう に コミ 
ュ ニ ケー ショ ン を 重視 し な いよ うな 敵 に 向い て いま す 。 ど の よう な シナ リオ を 再現 し た いか に より 、Al の 
デザ イン も すこ し ずつ 変わ っ て きま す 。 


ボトム アッ プ 
(創発 ) 


図 19-1 トッ プ ダ ウン アプ ロー チ と ボトム アッ プア プロ ー チ 


今回 の ゲー ム は チェ ス の よう に 組織 (人 間 の 集団 ) が 敵 で す 。 こ の よう な 場合 は プレ イヤ ー の 意思 決定 
が 大 切 で す の で 、 ト ッ プ タウ ン 式 に Al を 作り ます 。Al の プレ イヤ ー が 判断 し て 自分 の リソー ス ( 船 ) を 動 


(た | ゲーム の 戦略 


i i Ua EE EH IES EE EH EE ES EE (EE EE CE EE EE EE EE EE EE EE [EE EE EH ES EE EN (UE CE [EE [EES EE EE (EE EE EE (EE ES EE ーー 1 


チェ ス や 将棋 、 今 回 の シミ ュ レ ーション ゲー ム の よう な ボー ド 形 ゲー ム の 場合 、 戦 略 は 基本 的 に 3 つの 

フェ ー ズ に 分 け て 考え る こと が よく あり ます 。 具 体 的 に は 序盤 (Opening)、 中 盤 (Mid-Game)、 終 盤 
(End-Game) で す 。 各 フェ ー ズ の 境目 は 多少 曖昧 で は あり ます が 、 今 回 は この よう に 分 解 し て 、 ゲ ー ム 
に 適用 し て いく こと に し ます 。 


序盤 
開始 状態 か ら 、AlI プ レイ ヤー は 中 盤 に 向け て 、 ゲ ー ム を 有利 に 進め る た め 、 い ち 早 く 良 い ポ ジ シ ョ ン 
を 狙い 、 敵 を よ け な が ら フ ィ ー ル ド に 展開 し ます 。 


(は MX スルメ スルメ メル メ メル メ スル メ メル ミ メ スルメ メス ルミ メル トミ メル トミ メト ルミ メ メル ミ メル ミ メル ミ メル ミ メ スルメ メス ルミ スル メ メル K メル ミ 1 は) 


Al 対戦 機能 を 実装 し よう 


中 毅 

強い ボ ポジ ショ ン を 得 た と ころ で 攻撃 を 始め ます 。 こ こ で は 自分 の 身 を 守り な が ら も 、 敵 と 全力 で 戦い 
ます 。 

終 毅 

終盤 は 中 盤 の 成 末 に より 戦略 が 変化 し ます 。 基 本 的 に 自分 が 有利 また は 不利 な 状況 に 応じ て 戦略 が 決 
まり ます 。 自 分 が 有利 な 場合 は 不利 な 側 (プレ イヤ ー) の ユニ ッ ト を 順次 攻撃 し て いき ます 。 自 分 が 不 
利 な 立場 に いる 場合 は 、 ゲ リラ (不正 規 兵 ) の よう に 有利 な 英 に 対し て で きる 限り の 抵抗 を 続け ます 。 


この よう な 基本 戦略 を Al に 適用 する 方 法 を 採る と Al の 作り 方 は ずっ と 楽に な り ま す 。Al に ゲー ム の 仕 
組み を 全部 理解 させ て 難し い 判 断 を させ る より は 、 ご この よう な 大 ま か な 戦 略 を 決め て か ら Al を デザ イン を 
する と 早い で す 。 図 に し て みる と 次 の よう に な り ま す 。 


相手 を 攻撃 で きる ? 


Al か が か プレイヤー の 
どちら か が 弱っ て いる ? 


終盤 
自分 が 強い 相手 が 強い 


図 19-2 序盤 と 中 盤 、 終 盤 の 変更 条件 


と の 図 の 内 容 を 、 そ の まま Al の ロジ ッ ク に 落と し まし ょ う 。 


や 
| 
| ステ ー ト マシ ン 
ie 
ここ で 例 を 示す の は ステ ー ト マシ ン あ る い は 有限 状態 機械 と いわ れる 方 式 で す 。FSM (Finite State 
Machine) と 略す こと も あり ます 。「 な ん が 難し そう …」 と 思う か も し れ ま せん が 、 要 は プロ グラ ム の 書 
き 方 の 一 種 で す 。 と くに FSM は ゲー ム AlI や スト ー リ ー を 作る の に 向い て いま す 。 典 型 的 な FSM の ロジ ッ 
ク を 示し て み ま す 。 


(スル K スルメ スルメ メル メ メル K メル メ メル K メル トミ メス ルミ メル ミ メル トミ メル トメ メス ルミ スルメ メル K ム メル ミ メ メル ミ メス ルミ メ メル ミ メル ミ メル ミ 1) 
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入力 


入力 と 状態 か ら 出 力 を 決定 | 


出力 
図 19-3 典型 的 な ステ ー ト マシ ン の 居 移 図 


この 図 の 場合 「 状 態 」 に 相当 する の が 、 今 回 の ゲー ム で の 「 序 盤 」「 中 盤 」「 終 盤 ]」 で す 。 状 態 が 変わ る 
と 、 入 力 を 判断 を する ルー ル が 変わ る 仕組 み に な っ て いま す 。 何 か 入力 が ある と 現在 の 状態 と その 入力 を 
元 に 状態 が 変化 する か を 判断 し ます 。 そ し て 、 決 定 し た 状態 と 入力 を 元 に 、 結 果 が 出力 され ます 。 こ の 仕 
組み を 、 各 フェ ー ズ ご と の 戦略 に あて は め て いき まし ょ う 。 

まず 、 基 本 と な る クラ ス と し て gasestate を 作り ます 。A ぇ rp1ayer が 呼び 出す メソ ッ ド の イン ター フ 
ェ イ ス で す 。 共通 の ロジ ッ ク は こち ら に 実装 し て いき ます 。 

Al Player が 使う 基本 の イン ター フェ イス は 次 の 2 つの メソ ッ ド に な り ま す 。 


今回 使う 戦略 の 状態 を 更新 する 。 こ の まま の 状態 で 
いい か 、 違 う 状 態 に 切り 替え る か を 判断 する 


var BaseState = Class.create({ 
updateState: function() { 
return nextState; 


}, 


chooseAction: function().{ 


この 状態 の 戦略 か ら ア クシ ョ ン を 
要求 する た め の メ ソ ッ ド 


return action; 
] アク ショ ン を 返す 


}) 


(は 人 X スルメ スルメ メル ミ メル トメ スル メ メス ルミ スルメ メス ルミ メル トミ メル K ミ メル トメ メル ミ メル ミ メ メル ミ メル トメ メル トミ メル メ スル メメ ルミ メメ ルミ え 【) 


Al 対戦 機能 を 実装 し よう 


これ か ら 、 各 状態 の ロジ ッ ク を 実装 し て Al を 作っ て み ま し ょ よう 。 


| AI の 土台 を 作る 


= a gen CF FE [EE CE (FE TE FE TET! (EF EE FT = [OE CE] TP] P| = FN] TE [| [| [FY f5 5 UP] WE [531 | EE Th 1 = [| FE EE [| [RE | 


AI の 実装 を 始め る た め に 今 の ゲー ム の 中 に 土台 を 用 意 し て お きま し ょ う 。A ム IPlayer と いう クラ ス を 作 
り ま す 。 初 め の 段 階 で は ば 、 ま だ 何 も す る 必要 は あり ませ ん 。 


var ATPlayer = Class.create(GamePlayer, { 
initialize: function(id, data) { 
GamePlayer.call(this, id, data); 
}; 


simulatePlay: function() { 
this.controller.endTurn(); 
}, 
}); 


シン グル プレ イ の と き は プレ イヤ ー 2 を ArpP1ayer に し ます 。 


beginCampaignGame: function(stageId) { 
プレ イヤ ー2 が 未定 義 な ら 
if (this.getPlayer(2) == undefined) { 
var player2 = new AIPlayer(2, {name:" 敵 "}): 
this.addPlayer(player2); 
} 


さら に 、 タ ー ン 制御 の 中 で aIplayec の ター ン の と き は simulatePlay を 呼び ます 。 


startTurn: function() { 
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this.updateTurn(); 
if (player instanceof AIPlayer) { 
utils.beginUIShield(); 


player.simulatePlay(); Al の ロジ ッ ク を 実行 


}, 


! AI の アク ショ ン を ゲー ム に 反映 する 


mi ニー ーー リー ドー トー ニキ ーー「ー= ニ il ニニ 1 ーー トニ ニート ーー トニー デー リリ ニー トー| ーー ーー リー ニー トー ーー トーー|ー ニ リリ ニニ ーーー | ニート ーー トーー ーー ニート ーー に ー ニ ーー ll 


ステ ー ト マシ ン か ら も ら っ た 判定 を ゲー ム に 反映 する の は arp1ayesr の ロジ ッ ク の 役割 り で す 。 


var ATPlayer = Class.create(GamePlayer, { 
initialize: function(id, data) { 
GamePlayer.call(this, id, data); 
this.state = new BaseState( ズ this); 
}, 


simulatePlay: function() { = 
ーー 「 状態 の 更新 
this.state = this.state.updateState(); 
var action = this.state.chooseAction(); 
戦略 の 選択 


this.setActiveFune(action.fune) ; 


ar self = this; 


setTimeout(function() { 


switch(action.type) { 
case "attack": 攻撃 が 選択 され た 場合 


action.fune.attackFune(action.target); 


this.controller.endTurn(); 


break; 
case I Skill'" . スキ ル 発 動 


var self = this 


action.fune.activateSkill(function() { 


self.controller.endTurn(); 


}) 


break; 
ee moven: 移動 が 選択 され た 場合 


Wa HE =EhIs: 


216 (は MX スルメ メス ルミ メ メル メ メル メ スルメ メル ミ スルメ メス ルミ メル トメ メル K メト ルミ メ メメ ルミ メル ミ メル ミ メス ルミ メ スルメ メル ミ メ スル メ メル K メル ミ 1 は) 


Al 対戦 機能 を 実装 し よう 


self.controller.map.moveFune(action.fune, 

action.path, function() { 
self.controller.endTurn(); 

}) 

break; 


} 現代 の CPU だ と AI の 処理 は 速 すぎ 
}, 1000); 人 る の で 、 自 然 に 見 える た め 、 わ ざと 


1000 ミ リ 秒 の あい だ 停止 させ ます 


}, 


}); 


じつは 、 す で に この ロジ ッ ク で Al と 対戦 する こと が で きま す 。 も ちろ ん ほとん ど 戦 略 は あり ませ ん の で 、 
か な り 適 当 な 動き に な り ま す が 、 こ れ だ け で も 何と な く AI 対 戦 が で きる よう に な る の で す 。 


ステ ー ト マシ ン の 実装 (0pening) 


ドニ キー トニ ーー ニニ ニス ーー ニニ ニニ トー 


ステ ー ト 変更 の 仕様 


序盤 で は 、 と に か く マ ッ プ を コン トロ ー ル する た め 移 動 を 繰り 返し ます 。 相 手 が 攻 撃 範囲 に 入っ た ら 状 
態 を 中 盤 で ある Miaeame (攻撃 モー ド ) に 切り 替え ます (サン ブル は chapter_19 ~ 37 に あり ます )。 


var OpeningState = Class.create(BaseState, { 
updateState: function() { 
var count = this.player.getFuneCount(); 
for (var i=0; 1 < count; ュ 1++) { 
var fune = this.player.getFune(i); 
var targets = this.getTargetsWithinRange(fune); 
if (targets.length > 0) ( 放 吾 和 因 に いれ ば ] 
console.log("AI switch from OpeningState to 
MidGameState' ): 


return new MidGameState(this.player); 状態 を 変更 
} 


console.log("AI in OpeningState'"); 
return this; 


}, 
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基本 戦略 の 流れ 


防御 系 の 船 の スキ ル は 効果 が 継続 する の で 事前 準備 を か ね て ある 程度 の 確率 で 発動 する よう に し ます 。 
それ 以外 の スキ ル は あま り 意 味 が な い の で 使い ませ ん ( 低 確 率 で 発動 する よう に し て も よい の で す が 、 ラ 
ンダ ム に 発動 する と 馬鹿 な Al に 見 える 恐れ が あり ます )。 


chooseAction: function() { 


var fune = this.getRandomFune(); 


| 防御 系 の 船 が 選択 され た 場合 
が SL 30% の 確率 で スキ ル 発 動 
if (Fune instanceof KataiFune) { 


if (fune.canUseSkill() && Math.random() < 0.3) { 
console.log("AI use skill", fune.getCaptainName(), 
fune.getSkillName()); 
return { 
type: "skill", 


fune: fune, 


} 
} else { 


序盤 で は その 他 の スキ ル は ば 発動 させ ませ ん 


} 


基本 的 に 大 きく 動く こと を 優先 に し ます 。 


chooseAction: function() { 


行動 が 選択 され な か っ た と き は 移動 


var moveList = this.getMovePosition(fune, 0.5); 
var pathList = []; 
for (var i1=0; 1 < moveList.length; ュ 1++) { 
var targetPosition = moveList[il; 
if (targetPosition.i <= (fune.i +2) && targetPosition.] 
>= (Fune.] -2)) { 
pathList.push(this.player.controller.map.getPath(fune, 


fune.i, fune.]J, targetPosition.i, targetPosition.])); 


(は MX スルメ スルメ メル ミ メル トメ スルメ メル ミ メ スルメ メル ミ メル トミ メメ ルミ メト ルミ メ メル ミ メル ミ メル ミ メル ミ メ メル トミ メル ミ メ スル メ メル K ヌメ ルミ 1) 


Al 対戦 機能 を 実装 し よう 


} 
pathList = this.sortPathByLength(pathList) ; 
var randomLongPathIndex = 
Math.floor (Math.random() *(pathList.length *0.3)); 
var path = pathList[randomLongPathIndex]; 
if (path == null) { 
console.log("AI no safe path"); 
path = this.getRandomPath(fune, 0.0); 
} 
console.log("AI random long Move", fune.getCaptainName()); 
return { 
type: "move'", 
fune: fune, 
path: path, 


}, 


ステ ー ト マシ ン の 実装 (Mid-Game) 


em i HN [| CE mamil fname EE = = | EE = = 中 


ステ ー ト 変更 の 仕様 


中 盤 は 戦い が 始ま る 状況 か ら ス ター ト し ます 。 ど ちら か の プレ イヤ ー の 船 が 半分 と な っ た ら 終 盤 で ある 
EndGame に 状態 を 切り 替え ます 。 


var MidGameState = Class.create(BaseState, { 


updateState: function() { 
勝っ て いる 場合 


if (this.player.getFuneCount() <= 


Math.ceil(this.player.getFuneCountInitial() /2)) { 
console.log("AI switch from MidGameState to EndGameBadState'"); 
return new EndGameBadState(this.player); 
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負け て いる 場合 


if (this.player.controller.getNonActivePlayer().getFuneCount() <= 
Math.ceil(this.player.controller.getNonActivePlayer(). 
getFuneCountInitial() /2)) { 
console.log("AI switch from MidGameState to EndGameGoodState"); 
return new EndGameGoodState(this.player); 


} 
console.log("AI in MidGameState'"); 


return this: 


}, 


基本 戦略 の 流 


攻撃 効果 の 高 そ うな 船 を 優先 的 に 動か す ロ ジッ ク を 実装 し て みて も よい の で す が 、 か な り 複 雑 に な る 可 
能 性 が あり ます 。 こ ご ここ で は 、 船 を 順番 に 選択 する ロジ ッ ク に し まし た 。 一 見 、 い いか げん そう に 見 えま す 
が 、 ラ ンタ ダム に 選択 され る こと で 十分 強い 人 工 知能 に な っ て いま す 。 逆 に これ 以上 強く する と 、 人 間 が 簡 
単に 勝て な く な る 可能 性 も あり ます 。 


chooseAction: function() { 
var count = this.player.getFuneCount(); 
for (var i1=0; 1 < count; ュ 1++) { 


var fune = this.player.getFune(i); 


最初 は スキ ル 発 動か ら チ ェ ッ ク を し ます 。 


var skillUse = this.testSkillUseInCombat(fune); 

if (skillUse) { 
console.log("AI use skill", fune.getCaptainName(), 
fune.getSkillName()); 


return skillUse; 


(メメ スル ミ メ メル K メ メル トミ メル トメ スル トミ メス ルミ メル ミ メメ メル トミ メル トミ メル トメ メル メ メメ スルメ メル メ スルメ メル トミ メル K メル K スル ミ ネト) 


Al 対戦 機能 を 実装 し よう 


スキ ル が 発動 し な か っ た と き は 、 攻 撃 範 囲 内 の 相手 か ら 攻 撃 の ター ゲッ ト を 選び ます 。 


chooseAction: function() { 


ター ゲッ ト を 探す 


var targets = this.getTargetsWithinRange(fune); 


if (targets.length > 0) { 
if (Math.random() < 0.7) { 攻撃 する 70%、 攻 撃 し な い 30% 


var target = targets[Math.floor(Math.random() *targets. 
length)]; 
console.log("AI attack from'", fune.getCaptainName(), 
"on", target.getCaptainName()); 
return { 

type: "attack", 

fune: fune, 


target: target, 


選択 し て いる 船 の HP が 50% 以 下 に な っ て いる な ら 逃 げ る こと に し ます 。 


chooseAction: function() { 


HP が 50% 以 下 な ら 逃 げ る 


if (fune.getHP() < (fune.getHPMax() * 0.5) ) { 
if (Math.random() < 0.3) { 
if (this.isTargeted(fune)) { 


90% の 確率 で 危険 な マス を 避け る 


var path = this.getRandomPath(fune, 0.9)/ 
if (path) { 


console.log("AI escaping", fune.getCaptainName()); 


return { 
type:"move", 


fune: fune, 
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path: path, 


何 も し な か っ た ら 序 盤 (Opening) の よう に ラン ダム に 動く こと に し ます 。 
これ で 中 盤 (mid game) の 行動 は 実装 で きま し た 、 次 は 終盤 (end game) の 2 パタ ー ン の 実装 を 見 
て み ま し ょ よう 。 


“ ステ ー ト マシ ン の 実装 : End-Game (勝ち 状況 ) 


a i = = = (= = = = = = = = = = = = = = = = = = = [= = = = = = = = = 時 = = = = = = = 


ステ ー ト 変更 の 仕様 


相手 の 船 の 数 が 50% 以 下 の と き に この 状態 に な り ま す 。 相 手 の 船 が 多く な る と gnaGameBadState に 
状態 が 変わ り ま す 。 


var EndGameGoodState = Class.create(BaseState, 
updateState: function() { 
if (this.player.getFuneCount() < this.player.controller. 
getNonActivePlayer().getFuneCount()) { 
console.log("AI switch from EndGameGoodState to 
EndGameBadState' ) 
return new EndGameBadState(this.player); 
} 
console.log("AI in EndGameGoodState'"); 


return this; 


基本 戦略 の 流 


こち ら の ステ ー ト は opsning と Mideame の 部 分 を 再 利用 し て いて 、 新 し い コ ー ド は あり ませ ん 。 戦 略 
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Al 対戦 機能 を 実装 し よう 


は 次 の よう に な り ま す 。 
・ 技 が 使え る な ら 使 う 
・ 相 手 に 攻撃 を する 
・ ラ ンダ ム に 動く 


| ステ ー ト マシ ン の 実装 : End-Game (負け 状況 ) 


ニキ ーー トニ ーー ドー ニス ーー トニ ーー ニー ニニ ーー に ニー ニー ニニ 


ステ ー ト 変更 の 仕様 


自分 の 船 の 数 が 50% 以 下 の と き に この 状態 に な り ま す 。 自 分 の 船 の 数 の ほう が 多く な る と snaeame 
GoodState に 状態 が 変わ り ま す 。 


Funo セ も on() { 


var EndGameBadState = Class.create(BaseState, { 自分 の 船 と 相手 の 船 を 比較 
updateState: 


if (this.player.getFuneCount() > this.player.controller. 
getNonActivePlayer().getFuneCount()) { 
console.log("AI switch from EndGameBadState to 
EndGameGoodState'"); 
return new EndGameGoodState(this.player); 


} SS 
' 状態 遷移 
console.1od( "AT 1n EndGameBadState'"); 


return も hiL gg)/ 


}, 


基本 戦略 の 流れ 


こち ら の ステ ー ト も 、 新 し い コ ー ド は あり ませ ん の で 全体 的 な 戦略 を 紹介 し ます 。 


・ 弱 っ た 船 は 逃げ る 

・ 技 が 使え る な ら 使う 

・ 相 手 に 攻撃 を する 

・ ラ ンダ ム に 動く 、 基 本 的 に 相手 に 近寄ら な い 
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こい 
l が La wh = この 
| 対 CPU の 対戦 モー ド も 作っ て お こう 
トー トー ニニ: ニニ = | ニニ = ニー ニー ニニ | ニニ 
せっ か く Al を 開発 し た の で すか ら 、 ス トー リー モー ド 用 に 作っ た Al を 対戦 モー ド で も 使え る よう に し て 


お きま し ょ う 。 は じ め に [VS」 を 選択 し た あと 、 ひ と つ 画 面 を 追加 し て 人 間 同 士 の 対戦 と CPU 対 戦 を 選 
べ る よう に し まし ょ う 。 


選択 に より beginVersusGame で GameP1ayer か が Arp1ayer を ブ プレイ ヤー2 に 設定 し ます 。 


これ だ け で 
実装 可能 で す (サン プル は chapter_19 一 38 に あり ます )。 


beginVersusGame: 


var player2; 


function(opponent) { 


if (opponent == "human") { 


player2 = new GamePlayer(2, {name:" プ レイ ヤー2"}); 
} else if (opponent == "ai") { 


player2 = new AIPlayer(2, {name:" プ レイ ヤー2"}); 


} 
対戦 相手 が Al な ら arplayer を 使用 
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Al 対戦 機能 を 実装 し よう 


今回 作っ て みた Al は 一 般 的 な ゲー ム で も 利用 で きる よう な Al で す 。 し か し 、 実際 に 深く 考え て いる わけ 
で は な く 、 複 雑 な こと も し て いま せん 。 し か し 、 あ る 程度 成立 する ゲー ム の 戦略 は 組み 込ま れ て いる の で 
(スキ ル の 使い どこ ろ な ど )、 プ レイ し て いる と まる で 自律 的 に 考え て いる よう な 感じ すら し ます 。 乱 数 で 
多少 変わ っ た 挙動 を する よう に な っ て いる の で 、 サ プラ イズ も あり ます 。 

も ちろ ん これ は 奥 の 深い Al の 世界 の ほん の 入り 口 を 見 た だ け に すぎ ませ ん 。 本格 的 な Al を 作る た め に は 
勉強 し な く て は いけ な いこ と が た くさ ん あり ます が 、 あ まり 難し いこ と を し な く て も それ な り の Al が 作れ 
る の は 体験 で きた か と 思い ます 。 
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ステ ー ジ の デー タ を 


追加 し よう 


ステ ー ジ デー タ を 調整 
する こと で ゲー ム バ ラ 
ンス も 調整 で きま す 


ステ ー ジ ご と に 敵 キ ャ ラ が 増え て きま す 


キャ ラク ター を 派生 
させ て 、 対 戦 キ ャ ラ 
軍団 を 作る よ 


Stage 


スト ー リ ー モ ー ド の デー タ は 
外部 ファ イル StageData.]s 
で 一 括 管 理 


本 草 で 勉強 する こと 


@ 敵 ユニ ッ ト を 追加 し よう @ 設定 は 別 フ ァイル で 管理 し よう 


@ JavaScript の 継承 機能 を 使っ て 効率 よ @ 設 定 フ ァイル を 変更 し て 、 ち ょ うど よい 強 
く 実 装 し よう さ に 調整 し よう 


@ ス テー ジ ご と に 登場 ユニ ッ ト を 設定 


Al と スト ー リ ー モ ー ド の た め の 仕 組み が で きま し た の で 、 今 度 は スト ー リ ー モ ー ド の た め の ゲ ー ム デー 
タ (コン テン ツ ) を 用 意 し まし よう 。 


ステ ー ジ の デー タ を 追加 し よう 


ツ | | 敵 ユ ニッ ト 


ITTWWW キ や キ ね 0 ね の 0 ね ね 0 ね の つべ へ IOWI つ WWI つ WI や WIKI べつ べつ べ ね + 


ー リ ー モ ー ド の た め に 敵 ユ ニッ ト を 追加 する こと に し ます 。 ボ ス 以 外 は 通常 の 船 よ り 弱 い 手 下 に す 
時 


BaseFune 


CaptainFune HayaiFune KataiFune 


BossTeki HayaiTeki KataiTeki 


KougekiTeki 
図 20-1 敵 キ ャ ラ の クラ ス ツ リ ー 


BaseFune を 継承 し て 作っ た 味方 の ユニ ッ ト を も う 一 度 継承 し 、 見 た 目 を 変え ます 。 継承 する こと で 
Al の 挙動 を 味方 と 同じ に で きま す (サン ブル は Chapter_20 一 399 に あり ます )。 


Var BossTeki = Class.create(CaptainFune, { キャ プ テ ン の 場合 
initialize: function(id) { 


CaptainFune.call(this, id); 


フレ ー ム を 合わ せる 
this.fune.frame = [32 S32 .. きり! 


7 


this.fune.sinkFrame = [35, 35, nullils 


}, 
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ほか の 船 に つい て も 同様 の 方 法 で 作成 し まし ょ う 。 


var HayaiTeki = Class.create(HayaiFune, { スピ ー ド 系 の 場合 


initialize: Funo モ 1on(1d) { 


HayaiFune.call(this, id); 


this.stats.hpMax = Math.floor(0.5 * this.stats.hpMax); 
this.stats.hp = this.stats.hpMax; 


フレ ー ム を 合わ せる 
S232 S39 


[SS 35。 。, LULL 


this.fune.frame 


this.fune.sinkFrame 


}, 


これ で ユニ ッ ト が で きま し た の で 、rfactoxy ク ラス に も 敵 ユ ニッ ト を 追加 を し まし ょ う 。 


funeFactory: function(name) { factory ク ラス を 改造 


switch(name) { 
case 1: 
case "captain": 
中 略 
case 5: 
case "teki boss": 
return new BossTeki (5); 
case 6: 
case teki hayai': 
} 
}, 


faotory が で きた の で 、 ス テー ジ デ ー タ 上 に これ ら を 簡単 に 配置 で きる よう に な り ま す 。 
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ステ ー ジ の デー タ を 追加 し よう 


yy 
! can ーー 
| ステ ー ジ デー タ 
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = 
ステ ー ジ デー タ は 手軽 に 編集 が で きる よう に 別 フ ァイル に し まし ょ う 。 外 部 ライ ブラ リ な どの と き と 同 
じ く HTML 側 に 読み 込み を 追加 し ます (サン ブル は chapter_20 っ 40 に あり ます )。 


く !DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<meta http-equiv="x-ua-compatible" content="IE=Edge"> 
<meta name="viewport" content="width=device-width, user-scalable=no"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<script type='text/javascript' src='../../../shared/javascript-astar/astar. 
Js'></script> 
<script type='text/javascript' src='../../../shared/jStorage-master/ 
jstorage.js'></script> 
<script type='" text/javascript" src="../../../../build/enchant.js"></script> 
<script type='"text/javascript" src="stageData.js"></script> 


ここ を 追加 
<script type='"text/javascript" src="main.j]s"></script> 


</head> 


ここ で は 今 ま で の デー タ を その まま 外部 の ファ イル に コピ ー し て し まい まし ょ う 。 フ ァイル に 出力 され 
た 最終 的 な デー タ は か な り 長 く な り ま す の で 一 部 を 紹介 し ます 。 


(Funo セ も on() { 
window.StageData = [ 


{ 


startPositions: [ 
{type: "teki hayai", &: 12, 3: 0}, | 保存 する デー タ 


}, 


startPositions: [ 
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0 
(| ステ ー ジ の デザ イン 


実際 の ステ ー ジ デー タ は 長い の で 、 こ こ で は ステ ー ジ デー タ の 概要 を 示す こと に し ます (ステ ー ジ 7 以 
降 は ステ ー ジ を 繰り 返す よう に な っ て いま す )。 


マ 表 20-1 ステ ー ジ ご と の 敵 ユ ニッ ト 


ステ ー ジ スピ ー ド 系 の 敵 防御 系 の 敵 攻撃 系 の 敵 ボス 
1 1 
2 1 1 
3 1 1 
4 2 1 
ら 1 1 1 
6 2 1 1 
X 1 1 1 1 


自分 が 失っ た 船 は 失っ た まま に な る の で 、 けっ こう 難易 度 は 高め で す が 、 人 工 知 能 は 完璧 で は な い の で 、 
頭 と 運 を 使え ば 勝つ こと は 十分 に 可能 で す 。 自 分 で プレ イ し な が ら 、 最 終 的 な バラ ンス や ステ ー ジ デー タ 
を 決め て みて くだ さい 。 
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ステ ー ジ の デー タ を 追加 し よう 


MW 


湯 


obert/Desktop/pirateTactics/enchant.js-builds-0.8.1/game/pirates/39/index.html uy 


% 4 x w J 


ee 人 光 ee 金 ee 省 oe 金 ce を eo を ee$ ee 少 ce 少 ee 人 光 oe 多 oo。 光 ee 多 ee 光 oe 光 ee 少 oe 多 ee$ee ゃ を ee ゃ $9e 光 ee 231 
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SINS で ゲー ム を 


シェ ア し よう 


ゲー ム を 共有 し て プレ 
イヤ ー の フィ ー ド バッ 
ク が 得 ら れる よう な 仕 
組み を 作ろ う ! 


Share a link with your followers 


ステ ー ジ 7 桂 で 行け まし た ! みん な は どこ まで 行け る ? 


Twitter ボ タン を 押す と 


| 7/qlLdroi muserContant Com pirataTacticsfgnchant が 
builds-0.8.1igameypirateshead/index.html#piratesTactics # 海 賊 J 


Remembar me Forgol password? 


Twitter の ウェ ブ ・ イ ン テ 
ン ツ を 利用 し て 作り ます 


i 


New to Twitter? Sign up » 


Get instant updatos from your friends, industry exports favorite colabrities, and 
what's 1 the world. 


と こ で は ゲー ム を Web 上 
で 簡単 に 公開 する 方 法 
を 紹介 し レ しま しょう 


本 草 で 勉強 する こと 
@ ゲー ム は コミ ュ ニ ケー ショ ン ツ ー ル 。 遊ん @ ゲー ム の 進捗 は Twitter に 投稿 で きる よう 
で も ら っ て 真 の ゲー ム に な る に し よう 


@ 誰 で も 気軽 に ゲー ム で 遊べ る よう に ゲー ム @ 投稿 は Twitter の ウェ ブ ・ イ ン テ ン ツ で 実 
を ネッ ト に 公開 し よう 現 

@ ご ご で は Dropbox を 使っ た ゲー ム の 公開 @ ブ プラ ウザ の ウィ ンド ウ 操 作 に は JavaSc 
方 法 を 紹介 し ます ript 関 数 を 使 お う 


お 疲れ 様 で す ! ここ まで で ゲー ム は 完成 し まし た ! 
で も 、 ゲ ー ム の 本 次 は コミ ュ ニ ケー ショ ン で あっ て 、 人 に 遊ば れる こと に よっ て 本 当 の 意味 で の ゲー ム 


SNS で ゲー ム を シェ ア し よう 


に な り ま す 。 

最後 の 草 で は 、 こ こま で 作っ た ゲー ム を 誰 で も 遊べ る よう に する た め 、 ゲ ー ム を シェ ア (配信 / 提 供 ) 
する 方 法 を 紹介 し まし ょ う 。 

も ちろ ん 、 ゲ ー ム に は いろ いろ な 形 が あり 、 提 供 の し か た は それ ぞ れ で す が 、 今 回 は ブラ ウザ ゲー ム を 
シン ブル に 共有 で きる 手法 を 教え まし ょ う 。 


a 
(た ゲー ム を ネッ ト に アッ プロ ー ド 
0 
ネッ ト で ゲー ム を 提供 する た め に は 、 ど こ か の サー バー に アッ プロ ー ド する 必要 が あり ます 。 自 分 で 
Web サ ー バ ー を 立て る の は それ な り に 手間 が か か り ま す 。 ま た 、 場 合 に よっ て は お 金 も 6 か か る で し ょ う 。 
し か し 、 最 近 は いろ いろ な 無料 サー ビス が あり ます 。 そ の ひと つと し て Dropbox を 使う 方 法 を 紹介 し 
まし ょ う 。Microsoft や Apple に よる 同様 の サー ビス も あり ます が 、Dropbox は どこ で も 使え 、 サ ービス 
も 安定 し て いま す の で 今回 は こち ら を 紹介 し ます (も ちろ ん 、 ほ か の サー ビス で 同じ よう に ゲー ム を シェ 
ア し て も 大 丈夫 で す )。Dropbox の アカ ウン ト を 持つ て いな い 人 は 、 最 初 に Dropbox サ イト で アカ ウン 
ト を 作成 し て くだ さい 。 


Dropbox の Web サ イト 


https://www.dropbox.com/ 


9 OO / [ndex.hm 


を ご | 碧 https://www.dropbox.com 


アカ ウン ト を 作っ た ら 、PC 用 の クラ イア ント アプ リケーション を ダウ ン ロ ー ド し て イン スト ー ル し て 
くだ さい 。 そ し て 、 パ ブリ ッ ク フ ォ ル ダ を 有効 に し て PirateTactics の フォ ル ダ を まる ご と Dropbox/ 
Public/ の 下 に 置い て し まい まし ょ う 。 次 に 、Dropbox/Public/pirateTactics/enchant.js-builds- 
0.8.2-b/game/pirates/head/ フ ォ ル タダ に 移動 し 、 メニュー か ら Index.html の URL を コピ ー し ます 。 
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Open 
Open With 


Move to Trash ageDatajs 
+ Copy Public Link 

穫 View on Dropbox.com 
稼 View Previous Versions 


Get Info 

Compress "index.html" 
Burn “index.htm ド ' to Disc.… 
Duplicate 

Make Alias 

Quick Look “index.html" 


Copy "index-html" 
= 3 rhead > | Index.html 
Clean Up selection bo 
baw View Nntinn に 


コピ ー し た ら 、 あ と は ブ プラ ウザ に URL を ペー スト し て 、Dropbox に ゲー ム が アッ プロ ー ド され た か を 
確認 し ます (ゲー ム が すべ て アッ プロ ー ド され る の に 数 分 か か る 場合 も あり ます )。 


8 OO / 日 imdexhtml x y [3 https:/ fdl.dropboxuserco: x \ NN) 5 = 
を と ご 「 帳 https://dl.dropboxusercontent.Com/u/XXXYYYZ/pirateTactics/enchant.js-builds-0.8.1/gam e/.… | 三 


PA 
者 に ) 
ダ 


お そら く 、 ブ ラウ ザ の URL は 次 の よう に な っ て いる は ず で す 。 


https://dl.dropboxusercontent.com/u/ パ ※※Y ア アグ /pirate Tactics/enchant.js-builds-0.8.1/ 


game/pirates/head/index.html 


この 「XXXYYYZ1] の 部 分 は Dropbox の アカ ウン ト 番 号 に な っ て いま す 。 こ の URL を ほか の 人 と 共有 
すれ ば 、 基 本 的 に 世界 の どこ か ら で も ゲー ム が 遊べ る は ず で す ! 
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SNS で ゲー ム を シェ ア し よう 


a 
! e 
( | Twitter で シェ ア 機 能 を 作る 
ーーー トー ーーー キー レー ニー ニー トー トー トーー | ニニ ーー トー ニー ニー ET EE ーー トーーーーー オーー ト ーー | 
さき ほど の URL を ほか の 人 に も 知ら せ た い の で 、Twitter で シェ ア し て み ま し ょ よう 。 
今回 、Twitter を 使う に は 2 つの 理由 が あり ます 。 ひ と つ 目 は 、Twitter に は ほか の SNS と 比べ て 制約 
が 少な く 、 ゲ ー ム 開発 者 が ほか の 開発 者 や プレ イヤ ー と 交流 する 場 に な つて いる こと で す 。 ふ た び 目 は 、 
Twitter は プロ グラ ミン グイ ンタ ー フ ェ イ ス が 公開 され て いる た め 、 ゲ ー ム と 連動 する た め の 仕 組み を 組 
み 込 みや すい こと で す 。 


この 本 の 読者 で あれ ば 、Twitter に つい て 知っ て いる 人 も 多い と 思 
いま す が 、Twitter は SNS (Social Networking Service) の ひと 。 
つ で す 。140 文 字 の 短い つぶ や き (Tweet) を 気軽 に 投稿 し た り 閲 」 
| 覧 し た り で きま す 。SNS は お も に 個人 が ネッ ト 上 で 交流 する た め の さ まさ ざま な 仕組 み を A 

提供 し て いま す 。 人気 の SNS と し て 、 ほ か に も LINE や Facebook の 利用 を 考え て みて も 


よい で し ょ う 。 SNS に は 楽曲 や イラ スト を 
「 発表 し て いる クリ エイ ター さん も 


多く いま す 


| Titter で シェ ア 機 能 を 作る 


ウェ ブ ・ イ ン テ ン ツ の 利用 


今回 は 、Twitter の ウェ ブ ・ イ ン テ ン ツ (Web Intents ) 機能 を 使う こと に し まし ょ う 。 ウ ェ ブ ・ イ ン 
テン ツ を 使う と URL を 利用 し て 簡単 に Twitter へ の 投稿 が 可能 で す 。 ウェブ ・ イ ン テ ン ツ の 使い 方 の 詳細 
は Twitter の 開発 者 向け サイ ト で 解説 され て いま す 。 


https://dev.twitter.com/web/intents 


英語 の 情報 し か あり ませ ん が 、 今 回 は Tweet を 発信 する だ け で す の で 、 そ の 部 分 の 方 法 を 簡単 に 説明 
し ます 。 
Tweet を 発信 する た め の URL は 次 の よう に な っ て いま す 。 


https://twitter.com/intent/tweet 


この URL に 次 の パラ メー タ を くつ つけ て アク セス し ます 。 
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url: シェ ア し た い URL 

via : 連携 し た い Twitter の アカ ウン ト (お も に 自分 の アカ ウン ト ) 

text : シェ エア し た い 文 章 (最大 140 文 字 で す が 、url や via な ども この 140 に 数 えま す ) 
hashtags : Twitter の # タ グ で シェ ア し た い キ ー ワ ー ド 


上 の イン テン ト を 利用 し て Twitter 上 に ゲー ム を シェ ア す る た め の ボ タン を 作り まし ょ う (サン ブル は 
Chapter_21 一 41 に あり ます )。 


var TwitterButton = Class.create(Sprite, { ボタ ン を 作成 


initialize: function(options) { 
Sprite.call(this, 64, 64); 
this.image = game.assets[uiTwitterBtnSprite]; 
this.stageId = options.stageId; 
this.url = options.url; 
}, 
ontouchend: function(params) { 
window.open("https://twitter.com/intent/tweet?url=" 
+encodeURIComponent(this.url) 
+'&text="+encodeURIComponent(" ス テー ジン "+this.stageId+" まで 
行け まし た ! み ん な は と ど と こま で 行け る ? ") 
+"'&hashtags=piratesTactics, 
海賊 ", "twitter", "top=50, left=50, width=500, height=400"); 


ここ で は 新た に ブラ ウザ の JavaScript 関 数 を 2 つ 使 いま し た 。 そ れ ぞ れ 紹 介し ます 。 
window.open( URL, ウィ ンド ウ 名 [, オ プシ ョ ン ] ) 


実行 する と 新た に ウィ ンド ウ が 作ら れ ま す 。「 オ プシ ョ ン 」 の 部 分 に ウィ ンド ウ の いろ いろ な 属性 を 指 
定 し ます 。 複 数 の 属性 は カン マ で 区 切っ て 指定 し ます 。 
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SNS で ゲー ム を シェ ア し よう 


マ 表 21-1 window.open 関 数 に 指定 する 属性 


属性 説明 値 
width ウィ ンド ツウ 幅 数 値 
height ウィ ンド ウ 高 さ 数 値 
left ウィ ンド ウ 位 置 左 数 値 
top ウィ ンド ウ 位 置 上 数 値 
menubar メニ ュー バー 有無 yeS/nO 
toolbar ツー ル バ ー 有 無 yeS/nO 
location アド レス バー 有無 yes/no 
status ステ ー タ スバ ー 有 無 yes/no 
resizable リサ イズ 可否 yes/no 


scrollbars スク ロー ル バ ー 有 無 yes/no 


encodeURIComponent 


文字 列 変換 の 関数 で す 。 ブ ラウ ザ の URL に は アル ファ ベッ ト 以 外 の 記号 や 日 本 語 の 文字 を 直接 使う 
こと が で きま せん 。 そ こ で 、 こ の メソ ッ ド で URL で 使え る 文字 に 変換 し ます 。 


@ 記 号 の 変換 
http://www.google.co.jp/search?h|=ja&q ニ encodeURIComponent 
! 
http%3A%2F%2Fwww.google.co.jp%2Fsearch%SFhI% 3Dja% 26q%3DencodeURICombp 


onent 


9 日 本 語 の 変換 (| 日 本 語 ] と いう 文字 列 を 変換 し て いま す ) 
日 本 語 
! 
% E6% 97% A5% E6% 9C% AC% E8% AA% 9E 


UI の 作成 


あと は スト ー リ ー モ ー ド で 負け た と き 、 GameManager で TwitterBut も on を 生成 し 、 保 存 さ れ て いる 
ステ ー ジ ID と 自分 の Dropbox の URL を 渡し ます 。 
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campaignOver: function(winner) { 


中 賠 

1if (winner.id == 1) 1 

} else if (winner.id == 2) { 
resultBanner.image = game.assets[uiLose]; 


var tweet = new TwitterButton({ 
stageId: self.stageId, 
url: "https://dl.dropboxusercontent.com/u/XXXYYYZ/ 
pirateTactics/enchant.js-builds-0.8.1/game/pirates/ 
head/index.html" 
}); 
touchable.addChild(tweet); 
tweet.x = 480 -32: 
tweet.y = 450; 


PL 


4 
を ご で https://dlLdropboxusercontent.com/u/4325065/pirateTactics/enchant.js-builds-0.8.1/ga.… 補 


@00O Index.htrni x 日 hitps:f/dl.dropboxuse. 4 x A N 


ゃ の 


Tweet ボ タン 


画面 の 中 の Twitter の 鳥 の ボタ ン を 押し た ら 、 新 し いい ウィンドウ が 開い て 、Twitter の ウェ ブ ・ イ ン テ 
ン ツ が 現れ ます 。 
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SNS で ゲー ム を シェ ア し よう 


00 Share a link on Twitter 
| 邊 Twitter, Inc. [US]| httns://twitter.com/intent/tweet?url=https%3A%.…… 


Share a link with your followers 


| ステ ー ジ 7 まで 行け まし た ! みん な は どこ まで 行け る ? 
https:/dldropboxusercontent.comyuy4325065/pirateTactics/enchantjs- 
| builds-0.8.1game/pirates/head/index.html #piratesTactics # 海 肛 月 


Phone, email or usernarme a Sgn ln and Tweot 


Password 


し | Remember me - Forgot password ? 


New to Twitter? SMgn up » 
Get instant updates from your friends, industry experts, favorite celebrities, and 
what's happening around the world. 


これ で プレ イヤ ー が 自分 の 進捗 を Tweet で き 、 周 り の 人 に ゲー ム の URL を 知ら せる こと で 、 遊 ん で く 


れる 人 を 増やし て いけ ます 。 
あと は どん どん 自分 の アイ デア や 新しい ルー ル な ど を ゲー ム に 取り 込み 、 自 分 な り の ステ ー ジ や キャ ラ 


を アレ ンジ し て みて くだ さい 。 本 書 の ソー スコ ー ド も 和 目 由 に 変え て みて 、 学 びな が ら 目 分 の オリ ジ ナ ル な 


ゲー ム 作 り に チャ レン ジ し て み ま し ょ よう 。 
自分 が ゲー ム を 作る の を 楽し め ば 、 ほ か の 人 も ゲー ム を 遊ん で 楽し むように な っ て いく に ちがい あり ま 


せん 。 
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<script> 


<C> 
canvas 
case 
Chrome 
Cocos2d-x 
console.log 
continue 
Core 

CSS 


< て D> 
default 
DOMSound 
Dropbox 
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enchant.js 


encodeURIComponent 


enterframe 


<F> 
Facebook 


factory 


First Person Shooting 


for 
FPS 
FSM 


<G> 
gameQuery 
GDD 
GitHub 
Group 
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Hello World 
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HTML 
HTTP 


index.html 
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こく J> 

JaVa 
JavaSoript 
jQuery 
JStorage 


<L> 
Label 
LINE 


<M> 
M.U.L.E. 
main.js 
MIT ラ イセ ンス 
Mobile Safari 


<N> 
NPC 
Nscripter 


hull 


<O> 


onload 


<P> 


preload 


く R> 
RPG 


<S> 

SDK 

SNS 

Sprite Kit 
src.loop 
Sublime Text 


switch 
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< く T> 
Timeline 
Twitter 


typeof 
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UFT-8 
undefined 
Unity 
UnrealEngine 
URL 
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WebAudioSound 
while 


window.open 
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デバ ッ グ ツー ル 38, 64, 73 マッ プ 機 能 84 
統合 開発 環境 61 マッ プシ ステ ム 87 
トー マス ・ ゴ ー ル ドス ミス 6 マン ハッ タン 距離 109 
トッ プ ダ ウン 212 磨 か が かれ て いる 147 
ミス 133 
く は > 向き 14 
配列 51 命名 規則 44 
バグ 33, 64 メイ ン ル ー プ 72 
バッ ク グ ラウ ンド 22 メー リン グリ スト 81 
パラ メー タ 123 文字 列 48 
ビジ ュ ア ルス タイ ル 23 文字 列 変換 237 
必殺 技 180 
非同期 72 く や > 
フィ ー ル ド 80 ユー クリ ッ ド 距離 107 
ブー リア ン 49 有限 状態 機械 213 
フェ アプ レイ 12 弱い Al 21 1 
フォ ント 26 
複合 100 


(メル メ メス ルミ スル ミ メス ルミ メル メ メル ミ メル ミ メ メル ミ メル トメ メル ミ メル トミ メル メ メル メ メス ルミ メ スルメ メル K メ メル ミ メル K メル ミ メス ルミ メル ミ え 【) 
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くら > 


乱数 4 
リア ル タ イ ム 制 12 
リソー ス 管 理 12 
リロ ー ド 143 
ルー プ 再 生 164 
レイ ヤー 83 
レベ ル デ ザ イン 26 
ロー カル 座標 96 
ロー カル スコ ー プ らら 
ロン グ コ メン ト 46 
くわ > 

ワー ルド 座標 96 


244 (は 人 X スルメ スルメ メル トミ メル トメ スルメ メス ルミ メ メル メ メル ミ メル トミ メル K メル トメ メス ルミ メス ルミ メル ミ メル トメ メル K ミ メル メ スルメ メル ミ メ メメ ルミ え 【) 


著者 プロ フィ ー ル 


CrOSSrOQdSCby Steve Harter ツ a 
ほ は と し どの 人 間 は 半 し | た ご と が な し | と 
思う けど 、 自 分 は ご の ゲー ム を 雑 読 の 
コー ド が ら 入 力 し て 、 ゲ ー ム 作り の 移 
強 を 始め ま し レ し / だ 。 


ロバ パ バート ・ ジ ェ イ ・ コ ゴー ルド 
(Robert Jay Gould) 

アメ リカ 生ま れ 。5 歳 の クリ スマ ス に Comodore64 と いう コン 
ビュー ター を 買っ て 眞 い 、8 歳 か ら 趣 味 で ゲー ム 開 発 を 始め た ギー 
ク 。 そ の 後 中 学 時 代 は アナ ログ や テー ブル トッ プ ゲ ー ム に も 夢中 に 
な り 、「 人 間 が ゲー ム を 楽し む お] 観点 で の ゲー ム 作 り 全 体 に 興味 が 
湧い た 結果 、 大 学 で は 動物 行動 学 と 人 工 知能 を 学ぶ 。 そ の 後 は 院生 
と し て 日 本 に 留学 し て 、 卒 業 後 は セガ 、 ス クウ ェ ア ・ エ ニッ クス 、 
グリ ー で ゲー ム 作 り を 経験 。 そ れ で も 物足りな さ を 感 じ D、 こ の た び 
沖 永 と GAMKIN を 立ち 上 げた 。 


思 L | 出 に 臣 っ た ゲー ム 
rEVE burst errorg 
や っ は り 自 分 が 業界 を 高 歳 し 始め た 作 
品 と て し | うと 、 こ れ に な り ま すか が ね 。 今 
で も 一 着い に 区 っ つて ます ね 。 


沖 氷 賢 吾 
(Kengo Okinaga) ョ 

大 学 在 籍 中 、 ゲ ー ム デザ イナ ー を 目指 し 、 就 職 活動 する も 唱え な 
く 断 受 。 目 身 の 特 性 を 考え 、 業 界 入り の 可能 性 を 模索 し た 結果 、 株 
式 会 社 カ プ コ ン の 営業 管理 部 門 で の 入社 を 果たす 。 新卒 一 年 目 、 ア 
ミュ ー ズ メン ト 施 設 運 営業 務 に 従事 し 、 業 務 の 傍ら 上 司 に ゲー ム デ 
ザイ ナー に な り た いこ と を 相談 する が 、 入 社 職種 が 違う た め に な れ 
な いと いう 現実 を 突き つけ られ る 。 そ の 後 、 ア ニ メ 、PC オ ン ラ イン 
ゲー ム 、 ソ ソーシャル ゲー ム 業 界 を 経て 、 今 まさ に 自身 の 人 生 す べ て 
受け 止め 、2013 年 9 月 GAMKIN 株 式 会 社 を 設立 し 、 ゲ ー ム デザ イ 
ナー と し て 再 ス ター ト を 切っ て いる 。 


GAMKIN 株 式 会 社 
10 年 来 の 友人 で あっ た 沖 永 氏 と ロバ ー ト 氏 が 、2013 年 9 月 に 設立 
し た ゲー ム 開 発 会 社 。 両 氏 の | 新しい 体験 が で きる ゲー ム を 作り た い 」 
と いう 想い に 賛同 し 、 ゲ ー ム 業界 の 変遷 と 共に 第 一 線 で 活躍 し て きた 
= ー る 熟練 の ゲー ム 開 発 者 達 が 集う 。 現 在 は 、 自 社 企画 「X-Tactics」 ( ク 
ロス タク ティ クス ) を 全 世 界 展開 に むけ て 鋭意 開発 中 。 
Games & Kinship ‥ http://www.gamkin.com/ 
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